1、Vue全局命令替换为app.XXX
为了能在一个页面使用多个vue的实例，并且不相互污染。原本的Vue.XXX都替换成app.XXX
20211106161340.png
2、原本Vue上的实例方法变为静态导出。
不再能直接Vue.nextTick(),而需要先从Vue当中导出nextTick再使用。
为了支持Vue的tree-shake，这些没有用到的方法不再会被webpack打包进去。减少体积。
// 原本
import Vue from 'vue'
Vue.nextTick(() => {
// 一些和 DOM 有关的东西
})
// ---------------------------------------
// Vue3
import { nextTick } from 'vue'
nextTick(() => {
// 一些和 DOM 有关的东西
})
受影响的API
Vue.nextTick
Vue.observable (用 Vue.reactive 替换)
Vue.version
Vue.compile (仅完整构建版本)
Vue.set (仅兼容构建版本)
Vue.delete (仅兼容构建版本)
3、v-model语法修改
为了支持自定义组件可以有多个双向绑定值
1、.sync的部分替换为v-model的新用法。
<ChildComponent :title.sync="pageTitle" />
<!-- 替换为 -->
<ChildComponent v-model:title="pageTitle" />
2、不带参数的v-model,确保其子组件的prop和event替换成了modelValue和update:modelValue
// 组件
<ChildComponent v-model="pageTitle" />
// ChildComponent.vue
export default {
props: {
modelValue: String // 以前是`value：String`
},
emits: ['update:modelValue'],
methods: {
changePageTitle(title) {
this.$emit('update:modelValue', title) // 以前是`this.$emit('input', title)`
}
}
}
4、v-if v-for在同一元素运用时优先级改变
2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用
3.x 版本中 v-if 总是优先于 v-for 生效。
(不要在同一元素上同时使用v-if v-for，以避免歧义)
5、v-bind="object" 现在排序敏感
原本直接写的同名组件参数会更加优先。
<!-- 模板 -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 结果 -->
<div id="red"></div>
现在顺序敏感
<!-- 模板 -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 结果 -->
<div id="blue"></div>
<!-- 模板 -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- 结果 -->
<div id="red"></div>
(尽量不要同时存在两种语法，如果必须，请注意顺序)
6、 v-on的.native修饰符删除
v-on 的 .native 修饰符已被移除。同时，新增的 emits 选项允许子组件定义真正会被触发的事件。
(删除 .native 修饰符的所有实例。
确保所有组件都使用 emits 选项记录其事件。)
7、只能使用普通函数创建函数式组件
8、异步组件写法改变
9、组件事件现在需要在 emits 选项中声明
Vue 3 现在提供一个 emits 选项，和现有的 props 选项类似。这个选项可以用来定义一个组件可以向其父组件触发的事件。
提供事件验证，处理原生事件的问题(移除了.native修饰)
<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['text'],
emits: ['accepted']
}
</script>
(如果没写, 组件上的事件接收函数会被出发两次。一次来自Vue的事件，一次来自原生事件)
10、生命周期更名
destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount
简要升级指南
- 检查component、directive等全局变量，替换成app实例方法。
- 检查组件中使用了nextTick、observable等方法。
- 检查使用了v-model的组件，value和input事件替换。
- 检查是否有同时在一个元素上使用了v-if和v-for。
- 检查使用v-bind时是否同时又注入了属性
- 检查删除.native修饰符。
- 检查函数式组件是否正确。
- 检查异步组件的写法是否正确。
- 检查每个组件的事件是否已经在emits项中声明。
- 检查destroyed、beforeDestroy生命周期名字是否变更。
