Vue3系列——ref与reactive创建响应式变量

在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