ctive

reactive将一个响应式对象中的每一个属性转换为ref对象(toRefs

toRef)computed

ref(初始值)。

返回值:一个RefImpl的实例对象简称ref对象或refref对象的value属性是响应式的。

注意点

JS中操作数据需要xxx.value但模板中不需要.value直接使用即可。

对于let

name

ref(张三)来说name不是响应式的name.value是响应式的。

templatediv

classpersonh2姓名{{name}}/h2h2年龄{{age}}/h2button

clickchangeName修改名字/buttonbutton

clickshowTel点我查看联系方式/button/div

/templatescript

name和age是一个RefImpl的实例对象简称ref对象它们的value属性是响应式的。

let

name

注意name不是响应式的name.value是响应式的所以如下代码并不会引起页面的更新。

//

name

console.log(age.value)}function

/scriptreactive

作用定义一个响应式对象基本类型不要用它要用ref否则报错语法let

响应式对象

reactive(源对象)。

**返回值**一个Proxy的实例对象简称响应式对象。

注意点reactive定义的响应式数据是“深层次”的。

templatediv

}}/li/ulh2测试{{obj.a.b.c.d}}/h2button

clickchangeCarPrice修改汽车价格/buttonbutton

clickchangeFirstGame修改第一游戏/buttonbutton

/templatescript

其实ref接收的数据可以是基本类型、对象类型。

若ref接收的是对象类型内部其实也是调用了reactive函数。

templatediv

}}/li/ulh2测试{{obj.a.b.c.d}}/h2button

clickchangeCarPrice修改汽车价格/buttonbutton

clickchangeFirstGame修改第一游戏/buttonbutton

/templatescript

ref创建的变量必须使用.value可以使用volar插件自动添加.value。

reactive重新分配一个新对象会失去响应式可以使用Object.assign去整体替换。

使用原则

若需要一个基本类型的响应式数据必须使用ref。

若需要一个响应式对象层级不深ref、reactive都可以。

若需要一个响应式对象且层级较深推荐使用reactive。

toRef)

作用将一个响应式对象中的每一个属性转换为ref对象。

备注toRefs与toRef功能一致但toRefs可以批量转换。

语法如下

templatediv

classpersonh2姓名{{person.name}}/h2h2年龄{{person.age}}/h2h2性别{{person.gender}}/h2button

clickchangeName修改名字/buttonbutton

clickchangeAge修改年龄/buttonbutton

clickchangeGender修改性别/button/div

/templatescript

通过toRefs将person对象中的n个属性批量取出且依然保持响应式的能力let

{name,gender}

通过toRef将person对象中的gender属性取出且依然保持响应式的能力let

age

clickchangeFullName全名改为li-si/button/div

/templatescript

修改set(val){console.log(有人修改了fullName,val)firstName.value

changeFullName(){fullName.value

li-si}