Vue3——ref和reactive的基础使用

基本概念：

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进行取值和赋值行为。