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 中,过滤器已移除,且不再支持。官方建议用方法调用或计算属性来替换它们。
全局过滤器,建议通过全局属性以让它能够被所有组件使用到。
其他
请参考官方文档