vue3.0学习之路 2(让数据变成响应式)

128 阅读1分钟

ref函数

  • 作用: 定义一个响应式的数据
  • 语法: const xxx = ref(initValue)
    • 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)
    • JS中操作数据: xxx.value
    • 模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div>
  • 备注:
    • 接收的数据可以是:基本类型、也可以是对象类型。
    • 基本类型的数据:响应式依然是靠Object.defineProperty()getset完成的。
    • 对象类型的数据:内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

    reactive函数

    • 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
    • 语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)
    • reactive定义的响应式数据是“深层次的”。
    • 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。