浅析vue3中的声明响应式数据 ref 和 reactive

在Vue2中响应式数据是通过defineProperty来实现的,而在Vue3响应式数据是通过ES6的Proxy来实现的。Vue3中实现响应式数据的方法是ref和reactive。

  • defineProperty只能单一地监听已有属性的修改或者变化,无法检测到对象属性的新增或删除,而Proxy可以轻松实现
  •  defineProperty无法监听属性值是数组类型的变化,而Proxy可以轻松实现

 ref注意点

  • 读取任何 ref 对象的值都必须通过 xxx.value
  • 普通变量使用 let 才可以修改值, ref 对象是个引用类型,可以在 const 定义的时候,直接通过 .value 来修改
  • 在数据修改时,可以使用 forEach、map、filter 等遍历函数来操作你的 ref 数组,或者直接重置
  •  如果参数是对象类型,其实底层的本质还是reactive,系统会自动将ref转换为reactive,例如
    ref(1) ===> reactive({value:1})

使用方法:



 reactive注意点

  •  reactive 是继 ref 之后最常用的一个响应式 API 了,相对于 ref,它的局限性在于只适合对象、数组,他能够将复杂数据类型变为响应式数据
  •  reactive的响应式是深层次的,底层本质是将传入的数据转换为Proxy对象
  • 在 vue3中,如果你使用 reactive 定义数组,必须只使用那些不会改变引用地址的操作,不要对通过 reactive 定义的对象进行解构,解构后得到的变量会失去响应性。

失去响应式:

let uids: number[] = reactive([ 1, 2, 3 ]);

// 丢失响应性的步骤
uids = [];

// 异步获取数据后,模板依然是空数组
setTimeout( () => {
  uids.push(1);
}, 1000);

正确方式:

let uids: number[] = reactive([ 1, 2, 3 ]);

// 不会破坏响应性
uids.length = 0;

// 异步获取数据后,模板可以正确的展示
setTimeout( () => {
  uids.push(1);
}, 1000);

 ***ref和reactive***

  • reactive参数一般接受对象或数组,是深层次的响应式。ref参数一般接收简单数据类型,若ref接收对象为参数,本质上会转变为reactive方法
  •  在JS中访问ref的值需要手动添加.value,访问reactive不需要
  •  响应式的底层原理都是Proxy

你可能感兴趣的:(前端vue,前端,javascript,vue.js,前端框架)