【6月日新计划更文活动】第16天

Vue3声明定义变量数据

ref函数

• 作用：定义一个响应式数据

• 语法：let XXX = ref(initValue)

  • 创建一个包含响应式数据的引用对象(reference 对象，简称 ref 对象)
  • JS中操作数据：XXX.value
  • 模版中读取数据：不需要value，直接<div>{{XXX}}</div>

• 备注：

  • 接收的数据可以是：基本类型，也可以是对象类型
  • 基本类型数据：响应式依然是靠Object.defineProperty()的get与set 完成的
  • 对象类型的数据：内部求组了Vue3中的新函数——reactive函数

reactive函数

• 作用：定义一个对象类型的响应式数据 (基本类型使用ref函数)

  • 语法：(const 代理对象 = reactive(源对象)接收一个对象(或数组)，返回一个代理对象 (proxy 对象)
  • reactive定义的响应式数据是 深层次的
  • 内部基于ES6的proxy实现，通过代理对象操作源对象内部数据进行操作