vue 3.x 相對於 vue 2.x 的重大修改


組件鈎子函數

 

自定義指令

  • API 已重命名,以便更好地與組件生命周期保持一致
  • 自定義指令將由子組件通過 v-bind="$attrs"

 

 

 

v-for 中的 Ref 數組

Vue 2 中,在  v-for 里使用的  ref attribute 會用 ref 數組填充相應的  $refs property。
Vue 3 中,這樣的用法將不再在  $ref 中自動創建數組。要從單個綁定獲取多個 ref,請將  ref 綁定到一個更靈活的函數上 (這是一個新特性)
 

 

 

 

Data 選項

2.x :data 選項是 object 或者是 function

3.x :data 選項已標准化為只接受返回 object 的 function

Mixin 合並行為變更

 

 

事件 API

2.x 語法

2.x 中,Vue 實例可用於觸發通過事件觸發 API 強制附加的處理程序 ($on$off 和 $once),這用於創建 event hub,以創建在整個應用程序中使用的全局事件偵聽器

 

3.x 更新

移除 $on$off 和 $once 方法,$emit 仍然是現有 API 的一部分,因為它用於觸發由父組件以聲明方式附加的事件處理程序

可以通過使用實現事件發射器接口的外部庫來替換現有的 event hub mitt

 

過濾器(removed

Filters 已從 Vue 3.0 中刪除,不再受支持(建議用方法調用或計算屬性替換它們)

 

片段

2.x 中,不支持多根組件,當用戶意外創建多根組件時會發出警告,因此,為了修復此錯誤,許多組件被包裝在一個 <div> 中;

3.x 中,組件現在可以有多個根節點!但是,這確實要求開發者明確定義屬性應該分布在哪里

 

功能組件

 在 Vue 2 中,功能組件有兩個主要用例:
    • 作為性能優化,因為它們的初始化速度比有狀態組件快得多
    • 返回多個根節點

 

全局 API

2.x 語法

Vue.nextTick() 是一個全局的 API 直接暴露在單個 Vue 對象上——事實上,實例方法 $nextTick() 只是一個方便的包裝 Vue.nextTick() 為方便起見,回調的 this 上下文自動綁定到當前當前實例

3.x 語法

 

key attribute

 

 

 

渲染函數 API

VNode Props 格式化

 

 

 

Slot 統一

  • this.$slots 現在將 slots 作為函數公開
  • BREAKING:移除 this.$scopedSlots

 

 

 

 

 

 

過渡的 class 名更改

 過渡類名 v-enter 修改為 v-enter-from、過渡類名 v-leave 修改為 v-leave-from

 

 

v-model

  • prop 和事件默認名稱已更改

  

  • sync 修飾符和組件的 model 選項已移除,可用 v-model 作為代替

  • NEW:現在可以在同一個組件上使用多個 v-model 進行雙向綁定
  • NEW:現在可以自定義 v-model 修飾符

 

  

 

 

 

 

v-if 與 v-for 的優先級對比

 

 

v-bind 合並策略

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM