Vue3学习

Vue

Vue3

setup

• 作用：组合API的入口函数

在这里插入代码片

ref

• 作用：定义一个数据的响应式，一般用来定义一个基本类型的响应式数据
• 使用：const XXX = ref(initValue)， 创建了一个包含响应式数据的引用 ref 对象
• 在 js 中操作数据：XXX.value
• 模板中操作数据：XXX

reactive

• 作用：定义多个数据的响应式
• 使用：const XXX = reactive(obj)，定义一个响应式的对象数据，会影响对象内的所有嵌套属性，返回的是一个 Proxy 的代理对象，XXX 是代理对象，obj 是目标对象
• 原理：使用 ES6 的 Proxy 实现，通过代理对象操作源对象的内部数据
• 直接使用目标对象的方式来更新目标对象中的成员的值，是不行的，只能使用代理对象的方式更新数据
• 新增、修改对象中的成员时，必须对代理对象进行操作，同时目标对象中的数据也会随之变化，界面也会更新渲染

Vue2 与 Vue3 响应式对比

• Vue2 的响应式
  • 核心：
    • 对象：通过 defineProperty 监听对象的已有属性值
    • 数组：通过
  • 问题：
    • 对象新添加、删除属性时，界面不会自动更新
    • 直接通过下标替换元素，或更新length，界面不会自动更新
  • 解决：使用 $set 方法实现对象和数组新增、删除属性的监听
• Vue3 的响应式
  • 核心：
    • 对象：通过 defineProperty 对对象
    • 数组：通过
  • 问题