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

Vue3定义数据 reactive 对比 ref

• 从定义数据角度对比：

  • ref用来定义：基本数据类型
  • reactive用来定义：对象 (或数组) 类型数据
  • 备注：ref也可以用来定义对象(或数组)类型数据，它内部会自动通过reactive转为代理对象

• 从原理角度对比

  • ref通过Object.defineProperty()的get和set来实现响应式(数据劫持)
  • reactive通过proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部数据

• 从使用角度对比：

  • ref定义的数据：操作数据需要.value，读取数据模板中可直接读取
  • reactive定义的数据：操作数据与读取数据，均不需要.value

setup的两个注意点

• setup执行的时机

  • 在beforeCreate之前执行，this是undefined

• setup的参数

  • props：值为对象，包含：组件外包传递过来，且组件内部声明了的属性

  • context：上下午对象

    • attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs
    • slots：收到的插槽内容，相当于this.$slots
    • emit：分发自定义事件的函数，相当于this.$emit