Vue3 的 Ref、IsRef、ToRef、ToRefs、ToRaw 详细介绍

网站建设3年前发布
35 0 0

20230306103751134c1e06852186db048558294a5b23539ebafb304,ref 属性除了能够获取元素外,也可以使用 ref 函数,创建一个响应式数据,当数据值发生改变时,视图自动更新。,检查变量是否为一个被 ref 包装过的对象,如果是返回 true ,否则返回 false。,创建一个 ref 对象,其 value 值指向另一个对象中的某个属性。,toRef(obj, key) 将对象中的某个值转化为响应式数据,分为两种情况:,注意:如果是在 DOM 挂载之前调用 chang 方法,改变数值,此时数据和视图都会发生改变。,最终值为 “李四”。,toRefs 用来解构 ref、reactive 包裹的响应式数据。接收一个对象作为参数,遍历对象上的所有属性,将对象上的所有属性变成响应式数据。,toRefs 解构数据时,如果某些参数作为可选参数,可选参数不存在时就会报错,如:,此时可以使用 toRef 解决此问题,使用 toRef 解构对象某个属性时,先检查对象上是否存在该属性,如果存在就继承对象上的属性值,如果不存在就会创建一个。,修改上边的代码为:,将响应式对象转为原始对象。做一些不想被监听的事情,从 ref 或 reactive 得到原始数据。,修改原响应式数据时,toRaw 转换得到的数据会被修改,视图也会更新,如:,如果修改 toRaw 得到的原始数据,原数据也会被修改,但是视图不更新。如:

© 版权声明

相关文章