vue3，ref和reactive声明变量有什么区别，分别怎么用

vue/vue3，ref和reactive声明变量有什么区别，分别怎么用

• 适用的变量类型不同
• 在js中获取值的方式不同
• 侦听深度不同
• 响应性区别

适用的变量类型不同

1. 对于原始类型，即非对象类型，只能用ref
2. 对于对象类型，既可以用ref，也可以用reactive

在js中获取值的方式不同

1. 在js中，获取ref声明的变量值，需要通过 .value 获取
2. 获取react声明的变量值，直接获取即可

侦听深度不同

1. 如果侦听ref声明的对象类型变量，当变量的属性发生变化时，不触发侦听，需要设置深度侦听{deep:true}
2. 如果侦听reactive声明的变量，当变量的属性发生变化时，触发侦听，无需设置深度侦听

响应性区别

1. ref声明的对象类型变量，可以通过 .value直接用新的对象赋值，改变变量的值，变量响应性存在
2. 给reactive包裹的对象类型变量重新赋值，变量响应性消失，该方法不可取。
3. reactive包裹的对象可以通过Vue.set()方法来重新赋值
4. reactive包裹的对象给其属性赋值，是不会影响响应性的