记录 Vue 3 重构项目中 API 的变更

142 阅读1分钟

1. vue 3 setset 和 delete 移除

vue 的响应式原理,简单说就是创建响应式对象。对象的更改可以触发 DOM 更新。

vue 2 通过 Object.defineProerty 来创建响应式对象,缺点是对象 property 和数组下标、长度的变化无法触发 getter/setter。

vue 3 通过 Proxy 来创建响应式对象。不存在 vue 2 所述的问题

所以:vue 3 用不到 setset** 和 **delete

2. $children 移除

vue 2 中通过 $children 自动获取子组件

vue 3 中使用 $refs 获取子组件,这个需要手动绑定

3. /deep/ 移除

chrome 浏览器废除了 /deep/,css 对这个deep selector 标准的制定,捉摸不定。vue 3 因此考虑实现了 ::v-deep 这个平台无关的指令来实现 deep selector

4. v-model 使用更改

表单组件,内置 双向绑定,不用关心。

自定义双向绑定,移除 .sync 修饰符

vue 2 使用 :customVar.sync="theVar"

vue 3 使用 v-model:customVar="theVar"

5. 可以直接加 key

6. v-if 和 v-else 不用手动加 key。框架会处理,自动添加 key

7. attrsattrs 和 listeners

vue 3 $attrs 包含 class 和 style

vue 3 移除 listeners,相关函数移动到listeners ,相关函数移动到 attrs