1、ref和reactive的区别。
① js中对ref定义的值读取、修改，需要加.value，可以用插件↓来简单使用
② ref修改引用可以直接修改，react不能修改引用对象，只能使用 Object.assign修改对象内容
③ 基本类型建议使用ref，若需要一个响应式对象且层级不深ref和reactive都可以。如果响应式对象层级比较深，推荐使用reactive。表单比较多、回显等使用reactive。
因为一堆.value不太合适
2、toRefs接收一个reactive定义的对象、toRef单个属性去转换成ref
let person = reactive({name:'张三':age:18})
let {age,name} = toRefs(person)
// 此时 age、name为 响应式的
console.log(age.value)
// 修改 age.value +=1; person中的 age也同时发生变化
let age1 = toRef(person,'age') // 此时age1是响应式的 congsole.log(age1.value)
3、computed有缓存、普通方法获取结果没缓存，页面用几次调几次
// 一般写法 let fullName = computed(()=>{ return name1.value + name2.value; })
// 支持修改计算属性的写法 let fullName = compuetd({ get(){ return name1.value + name2.value; }, set(val) { let [str1,str2] = val.split('-'); name1.value = str1; name2.value = str2; } })
4、watch四种用法：1、ref所定义的数据 2、reactive定义的数据3、函数返回的值4、包含以上的数组
// 监听ref基础数据并停止 let sum = ref(8); let stopWatch = watch(sum,(newValue,oldValue)=>{ if (newValue>10) { stopWatch(); // 停止监听 } }); let person = ref({name:'张三',age:18}); // 只能监听到person对象的引用是否发生变化 watch(person,(newValue,oldVale)=>{ }); // 开启深度监听，这样直接可以监事 person的每个属性编号 // immediate:true 首次给person赋值也能监听到 watch(person,(newValue,oldVale)=>{ },{deep:true,immediate:true}); let person2 = reactive({name:'李四',age:20}); // 监听reactive对象的数据，默认开启深度监视且无法自动关闭 watch(person2,(newValue,oldValue)=>{ });
监听对象的属性
// 监听函数返回的值 let person = ref({name:'张三',old:18,car:{c1:'奥迪',c2:'宝马'}}); watch(()=>person.name,(newValue,oldValue)=>{ }); // 监听属性值是对象时，要加深度监听才能监听到对象内容变化 watch(()=>person.car,()=>{},{deep:true});
5、watchEffect，立即会执行、并全自动监视相关条件（watch需要指定监听的属性、watchEffect不需要指定）
let temp = ref(0); let height = ref(10); watchEffect(()=>{ if (temp.value>60||height>50) { // 触发了 } })
6、接口、泛型、自定义类型。 export type Persons = PersonInter[] 也可以.
7、传 props
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。