一孵稽、組件掛載方式不同
- 2.x
import Vue from 'vue'
import App from './App.vue'
import i18n from "@/i18n";
import router from "@/router";
import store from "@/store";
Vue.config.productionTip = false
new Vue({
i18n,
router,
store,
render: h => h(App)
}).$mount("#app");
- 3.0
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
注意：應用實例暴露的大多數(shù)方法都會返回該同一實例，允許鏈式：但是.mount('#app')要放在最后十偶，因為mount不返回應用本身菩鲜。相反，它返回的是根組件實例惦积。
二接校、template模版變化
- 2.x、不支持多個根元素
- 3.0狮崩、組件可以包含多個根節(jié)點
三蛛勉、雙向綁定原理變化
- 2.x使用Object.defineProperty
var value;
var obj = {};
Object.defineProperty(obj, 'key', {
get: function () {
return val;
},
set: function (newVal) {
value = x;
}
})
- 3.0使用ES6的新特性porxy
var obj = {};
var obj1 = new Proxy(obj, {
get: function (target, key) {
return target[key];
},
set: function (target, key, newVal) {
target[key] = newVal;
}
})
四、生命周期鉤子函數(shù)的變化
2.x -> 3.0
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
五睦柴、自定義指令鉤子函數(shù)的變更：
2.x -> 3.0
bind → beforeMount
inserted → mounted
beforeUpdate：新的诽凌！這是在元素本身更新之前調用的，很像組件生命周期鉤子坦敌。
update → 移除侣诵！有太多的相似之處要更新，所以這是多余的狱窘，請改用 updated杜顺。
componentUpdated → updated
beforeUnmount：新的！與組件生命周期鉤子類似训柴，它將在卸載元素之前調用哑舒。
unbind -> unmounted
- 2.x
<p v-color="'red'">顯示此文本顏色</p>
Vue.directive('color', {
bind(el, binding, vnode) {
el.style.background = binding.value
}
})
- 3.0
<p v-color="'red'">顯示此文本顏色</p>
const app = Vue.createApp({})
app.directive('color', {
beforeMount(el, binding, vnode) {
el.style.background = binding.value
}
})
六、變更或者廢棄的方案
- 不能再使用Vue.nextTick/this.$nextTick幻馁，Vue3中你可以用：
import { nextTick } from 'vue'
nextTick(() => {
// something
})
- 棄用
refs
- 不再使用
$on越锈、$once、$off - filter被移除膘滨，推薦使用方法調用或計算屬性替換它們甘凭。
- Vue.prototype 替換 app.config.globalProperties
- 3.0版本中 v-if 總是優(yōu)先于 v-for 生效。
- Mixin 合并行為變更淺層次執(zhí)行合并火邓；
- VNode Props扁平化處理丹弱；
七、tree-shaking
webapck搖樹優(yōu)化铲咨，僅適用于 ES Modules builds躲胳，vue3.0使tree-shaking大方異彩，應用程序采用按需加載的方式導出纤勒，沒有被引用的模塊不會被打包進來坯苹，減少包大小，縮小應用的加載時間摇天。
八粹湃、更好的TypeScript集成
全面擁抱 typescript
