在vue2中,将数据写在data中,就能定义响应式数据。在vue3中不再写data了,那么响应式数据如何定义呢? 就要用到ref与reactive了。
ref:创建基本类型、对象类型的响应式数据
1. 方法:
(1) 引入ref:import { ref } from ‘vue’;
(2) 定义响应式变量:let xxx =ref(初始值);
(3) 使用该变量的值
i. 在js中,需要使用xxx.value
--- 可以使用Vue-Official插件自动添加.value
ii. 在模板中,直接使用变量名即可,不需加.value
--- 注意:用ref定义对象类型的响应式变量时,底层是使用reactive实现的。
2. 返回值:一个RefImpl的实例对象,简称ref对象或ref,ref对象的value属性是响应式的。
reactive:创建对象类型的响应式数据
1. 方法:
(1) 引入reactive:import { reactive } from ‘vue’;
(2) 定义响应式对象类型变量:let xxx = reactive(原对象);
2. 返回值:一个Proxy的实例对象,该对象是响应式的,且是深层次响应的。
3. 局限性:
重新分配一个新对象,会失去响应式,如下:
要解决该问题,可以使用Object.assign,如下:
--- 如果使用ref重新分配对象,直接修改value即可,如下:
总结:ref与reactive的使用原则
1. 若需要一个基本类型的相应数据:必须使用ref
2. 若需要一个响应式对象,层级不深,ref、reactive都可以
3. 若需要一个响应式对象,且层级较深,推荐使用reactive