基本概念:
1、ref:用于创建一个响应式对象,接收一个参数,这个参数可以是任意类型的,这是ref和reactive的区别之一,不管是基本类型还是引用类型的参数,ref创建的对象都是响应式的,但是ref创建出来的对象必须要通过.value进行取值;
2、reactive:用于创建一个响应式对象,接收一个参数,这个参数的类型,在源码中首先会判断传入的参数类型是不是一个对象,如果不是则不做任何处理,直接返回,同时开发环境下会在控制台输出一个警告,所以严格意义上说在使用reactive去创建对象的时候,并不是不能传入基本类型的数据,可以传,只是这种数据不具备响应式;
重新赋值问题:
最近在使用vue3写项目的时候,发现使用reactive创建的对象,在重新赋值的时候,该对象是会失去响应式的,数据发生了改变,但是视图并没有更新,后来改用ref创建对象,进行重新赋值的时候,对象仍然具有响应式。
let form1 = ref({
name: "张三",
age: 18
});
let form2 = reactive({
name: "李四",
age: 20
});
form1.value = { // 数据改变了,同时视图也会更新
name: "王五",
age: 10,
}
form2 = { // 数据改变了,但是视图不会更新
name: "王五",
age: 10,
}
使用watch监听对象时:
let formInfo = ref({
name: "张三"
})
setTimeout(() => {
formInfo.value.name = '李四'
})
watch(formInfo, () => {
console.log(formInfo.value.name) // 李四
}, {
deep: true
})
使用reactive创建对象的时候,使用watch监听可以不加上deep: true,默认是深度监听,但是如果是使用ref创建的对象,在使用watch监听的时候,要想实现深度监听,必须手动设置deep: true;
总结:
1、对于响应式而言,ref支持基本类型和引用类型,而reactive仅支持引用类型;
2、如果需要对引用数据类型进行重新赋值的时候,推荐使用ref进行响应式的创建,记得使用.value进行取值和赋值行为。