1翠肘、Vue全局命令替換為app.XXX
為了能在一個(gè)頁(yè)面使用多個(gè)vue的實(shí)例灵迫，并且不相互污染书幕。原本的Vue.XXX都替換成app.XXX
2象迎、原本Vue上的實(shí)例方法變?yōu)殪o態(tài)導(dǎo)出香伴。
不再能直接Vue.nextTick(),而需要先從Vue當(dāng)中導(dǎo)出nextTick再使用慰枕。
為了支持Vue的tree-shake，這些沒(méi)有用到的方法不再會(huì)被webpack打包進(jìn)去瞒窒。減少體積捺僻。
// 原本
import Vue from 'vue'
Vue.nextTick(() => {
// 一些和 DOM 有關(guān)的東西
})
// ---------------------------------------
// Vue3
import { nextTick } from 'vue'
nextTick(() => {
// 一些和 DOM 有關(guān)的東西
})
受影響的API
Vue.nextTick
Vue.observable (用 Vue.reactive 替換)
Vue.version
Vue.compile (僅完整構(gòu)建版本)
Vue.set (僅兼容構(gòu)建版本)
Vue.delete (僅兼容構(gòu)建版本)
3、v-model語(yǔ)法修改
為了支持自定義組件可以有多個(gè)雙向綁定值
1崇裁、.sync的部分替換為v-model的新用法匕坯。
<ChildComponent :title.sync="pageTitle" />
<!-- 替換為 -->
<ChildComponent v-model:title="pageTitle" />
2、不帶參數(shù)的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在同一元素運(yùn)用時(shí)優(yōu)先級(jí)改變
2.x 版本中在一個(gè)元素上同時(shí)使用 v-if 和 v-for 時(shí)葛峻，v-for 會(huì)優(yōu)先作用
3.x 版本中 v-if 總是優(yōu)先于 v-for 生效。
(不要在同一元素上同時(shí)使用v-if v-for巴比，以避免歧義)
5术奖、v-bind="object" 現(xiàn)在排序敏感
原本直接寫的同名組件參數(shù)會(huì)更加優(yōu)先。
<!-- 模板 -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 結(jié)果 -->
<div id="red"></div>
現(xiàn)在順序敏感
<!-- 模板 -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 結(jié)果 -->
<div id="blue"></div>
<!-- 模板 -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- 結(jié)果 -->
<div id="red"></div>
(盡量不要同時(shí)存在兩種語(yǔ)法轻绞，如果必須采记，請(qǐng)注意順序)
6、 v-on的.native修飾符刪除
v-on 的 .native 修飾符已被移除政勃。同時(shí)唧龄，新增的 emits 選項(xiàng)允許子組件定義真正會(huì)被觸發(fā)的事件。
(刪除 .native 修飾符的所有實(shí)例奸远。
確保所有組件都使用 emits 選項(xiàng)記錄其事件既棺。)
7讽挟、只能使用普通函數(shù)創(chuàng)建函數(shù)式組件
8、異步組件寫法改變
9丸冕、組件事件現(xiàn)在需要在 emits 選項(xiàng)中聲明
Vue 3 現(xiàn)在提供一個(gè) emits 選項(xiàng)耽梅，和現(xiàn)有的 props 選項(xiàng)類似。這個(gè)選項(xiàng)可以用來(lái)定義一個(gè)組件可以向其父組件觸發(fā)的事件胖烛。
提供事件驗(yàn)證眼姐，處理原生事件的問(wèn)題(移除了.native修飾)
<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['text'],
emits: ['accepted']
}
</script>
(如果沒(méi)寫, 組件上的事件接收函數(shù)會(huì)被出發(fā)兩次。一次來(lái)自Vue的事件洪己，一次來(lái)自原生事件)
10妥凳、生命周期更名
destroyed 生命周期選項(xiàng)被重命名為 unmounted
beforeDestroy 生命周期選項(xiàng)被重命名為 beforeUnmount
簡(jiǎn)要升級(jí)指南
- 檢查component、directive等全局變量答捕，替換成app實(shí)例方法。
- 檢查組件中使用了nextTick屑那、observable等方法拱镐。
- 檢查使用了v-model的組件，value和input事件替換持际。
- 檢查是否有同時(shí)在一個(gè)元素上使用了v-if和v-for沃琅。
- 檢查使用v-bind時(shí)是否同時(shí)又注入了屬性
- 檢查刪除.native修飾符。
- 檢查函數(shù)式組件是否正確蜘欲。
- 檢查異步組件的寫法是否正確益眉。
- 檢查每個(gè)組件的事件是否已經(jīng)在emits項(xiàng)中聲明。
- 檢查destroyed姥份、beforeDestroy生命周期名字是否變更郭脂。
