Vue 3 改动汇总

以下列出vue3中与开发关注较高的改动，欢迎补充！

 

1、v-for 指令不再必须指定 key 值，框架会自动生成。

2、<template v-for=“...” >...</template> 格式已支持指定 key 值。且将被渲染为原声的template元素。

3、同一元素上 v-if 和 v-for 的优先级变更为 v-if 高于 v-for。

4、v-bind="属性object" 与标签自身的属性值 合并优先级 由v-bind优先级高 变更为 出现的先后顺序来判断。

5、不再在 $ref 中自动创建数组。要从单个绑定获取多个 ref，请将 ref 绑定到一个更灵活的函数上 (这是一个新特性)。

6、异步组件已更换为defineAsyncComponent方法。

7、自定义指令生命周期改为与组件生命周期一致，新增 beforeUpdate、移除update、componentUpdated更名为updated、新增beforeUnmount、unbind更名为unmounted。

8、生命周期：取消beforeCreate、created, 改用setup()，调用时机早于beforeCreate。 destroyed 更名为 unmounted、 beforeDestroy 更名为 beforeUnmount。其余生命周期前面添加on关键字。

9、生成 prop 默认值的工厂函数不再能访问 this。

10、data不再接收一个对象，必须使用function。mixin混入时data将浅层次执行合并（即相同的属性才会合并进来）。

11、过渡类名改动。

12、filters已被移除，建议用方法调用或计算属性替换它们。

13、事件api 中，$on，$off 和 $once 实例方法已被移除。

14、内联模版attribute已被移除

15、键盘按键修饰符不再支持数字，建议转换为它们的 kebab-cased (短横线) 命名， 如：

<input v-on:keyup.delete="confirmDelete" />

16、新增依赖注入provide/inject，解决props层层穿入层级较深的问题。

17、新增setup选项，作为在组件内部使用组合 API 的入口点。

18、新增响应式api、watchEffect