1. v-if与v-for优先级
2.xx 版本 v-for > v-if
3.xx 版本 v-if > v-for
2. <template v-for>中key值用法改变
<template v-for> key值应该放在<template>标签中，不再放到子标签中
在vue2.x中
<template v-for="item in list">
<div :key="'heading-' + item.id">...</div>
<span :key="'content-' + item.id">...</span>
</template>
在vue3.xxx中
<template v-for="item in list" :key="item.id">
<div>...</div>
<span>...</span>
</template>
3. v-for中的ref数组
在v-for生成的节点中，如果配置了ref属性，vue3中已经不再默认保存到$refs数组中
在2.xxx中，this.$refs数组中可以获取到配置的ref节点
<div v-for="item in 5" :ref="item" :key="item">{ { item }}</div>
在3.xx中，需要用给ref配置相应的函数来处理
<div v-for="item in list" :ref="setItemRef"></div>
import { onBeforeUpdate, onUpdated } from 'vue'
let itemRefs = []
const setItemRef = el => {
if (el) {
itemRefs.push(el)
}
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
4. 移除 $children
在2.xx中，我们可以通过 this.$children 来获取当前组件中直接引用的子组件， 在 3.x 中，$children 属性已被移除，且不再支持，如果你需要访问子组件实例，官方建议建议使用 $refs
5. $attrs中包含class和style
$attrs 现在包含了所有传递给组件的属性，包括 class 和 style。
在2.xx时，$attrs中是不包含class和style的，在设置了 inheritAttrs: false 时，会出现副作用
子组件：
<template>
<label>
<input type="text" v-bind="$attrs" />
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
父组件：
<my-component id="my-id" class="my-class"></my-component>
2.xx会生成以下 HTML
<label class="my-class">
<input type="text" id="my-id" />
</label>
3.xx会生成以下 HTML
<label>
<input type="text" id="my-id" class="my-class" />
</label>
6. 自定义指令中勾子函数更改
- created - 新增！在元素的 attribute 或事件监听器被应用之前调用。
- bind → beforeMount
- inserted → mounted
- beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。
- update → 移除！该钩子与
updated有太多相似之处，因此它是多余的。请改用updated。 - componentUpdated → updated
- beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。
- unbind -> unmounted
例子参考官方文档：Custom Directives | Vue 3 Migration Guide
7. data配置项
1. 不在支持值为对象的写法，只能写为函数形式
2. 当来自组件的 data() 及其 mixin 或 extends 基类被合并时，合并操作现在将被浅层次地执行
8. 不再支持事件总线
从实例中完全移除了 $on、$off 和 $once 方法。$emit 仍然包含于现有的 API 中，因为它用于触发由父组件声明式添加的事件处理函数。
9. 移除过滤器
在 3.x 中，过滤器已移除，且不再支持。官方建议用方法调用或计算属性来替换它们。
全局过滤器，建议通过全局属性以让它能够被所有组件使用到。
其他
请参考官方文档