做者：padaker前端
https://padaker.com/blog/post/5fc73352cb81362ed96f2fb9vue
做爲技術人員，隨時保持技術同步是很重要的事情。雖然Vue3已經發布很長時間了，如今開始保持更新也還不晚。新項目能夠拿來練練手XD，老項目就不建議升級了。webpack
🔥🔥創建項目
1. 使用 vite-app
npm init vite-app <project-name>
這裏的vite-app是一個新項目，它的官方介紹是一個快速的WEB開發構建工具。這裏咱們試了一下，整個構建過程十分的快速。和以往的webpack build的方式不同，它使用了原生ES模塊加載。web
2. 使用vue-cli
npm install -g @vue/cli # OR yarn global add @vue/cli
vue create <project-name>
🔥🔥v-model新語法糖
默認使用modelValue傳遞值。面試
<ChildComponent v-model="pageTitle" />
<!-- would be shorthand for: -->
<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event" />
也支持綁定不一樣的屬性，有點像是v-model和sync的結合體。vue-cli
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
<!-- would be shorthand for: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" :content="pageContent" @update:content="pageContent = $event" />
🔥🔥全局API
1. 再也不使用new Vue
問題
使用new Vue會共享一個全局配置。這對於測試來講不太友好，每一個測試用例都須要一個沙盒環境，全局變量去殘留一些反作用。npm
解決
開始使用application概念，建立一個App。數組
2. 再也不用Vue.prototype
// before - Vue 2
Vue.prototype.$http = () => {}`
`// after - Vue 3
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}
3. 全局方法如今在app實例上
| vue2.x | vue3 |
|---|---|
| Vue.component | app.component |
| Vue.directive | app.directive |
| Vue.mixin | app.mixin |
| Vue.use | app.use |
4. 如今須要手動掛載根元素
app.mount("#app")微信
5. Tree-shaking
In Vue 3, the global and internal APIs have been restructured with tree-shaking support in mind.app
沒有用到的方法(代碼)最後不會被打包到最終的包中。這能夠優化項目體積。
可是用法也須要進行改變：
import { nextTick } from 'vue'
nextTick(() => {
// something DOM-related
})
不能再使用Vue.nextTick/this.$nextTick
🔥異步組件須要顯示定義
import { defineAsyncComponent } from 'vue'
const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
🔥$attrs 將包含class和style
vue2.x中，class和style會被直接設置在組件的根元素上而且不會出如今$attrs中。
可是在vue3中，若是子組件只有一個根元素，則class和style會被直接設置在該元素上。超過一個則不會設置。
若是組件中設置了inheritAttrs: false，則不管如何都不會自動設置根元素的class和style。
$listeners被移除
事件監聽器也被包含還在了$attrs中。
如今屬性透傳更方便了！
🔥指令
指令和組件生命週期更契合，並使用統一的命名。
| vue2.x | vue3 |
|---|---|
| bind | beforeMount |
| inserted | mounted |
| - | beforeUpdate (新) |
| update (移除) | - |
| componentUpdated | updated |
| - | beforeUnmount (新) |
| unbind | unmounted |
新特性fragments
容許組件有多個根元素！
template容許設置key
循環template不再用往裏面設置key了。
scopedSlots正式棄用
vue2.6中對slot進行了改版，可是仍然對scopedSlots兼容，vue3正式棄用掉scopedSlots
監聽數組變化須要用deep屬性啦
若是不加deep只能檢測整個數組被替換。
$children 被移除
若是想訪問子組件，使用$refs。
事件API被移除
$on,$off,$once再也不使用。2.x的EventBus方法不能再使用。
🔥🔥Filter被移除！淦
不能再用|使用filter。Sad。
最後
1.看到這裏了就點個在看支持下吧，你的「點贊，在看」是我創做的動力。
2.關注公衆號【全棧修煉】，回覆「電子書」加入得到 160 本前端精華電子書哦
往期精文
本文分享自微信公衆號 - 全棧修煉（QuanZhanXiuLian）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。