Vue 3.0 新特性解析

Vue 的下一代版本(3.0)終於在9.18日發佈正式版了,代號居然叫“One Piece”,不知海賊王粉們會作何感想... 不過終極祕寶這個定位,倒是很符合大家對這個版本的期待。去年開始,3.0版本的各種消息就一直源源不斷,我只是粗略的瞭解了一下,只知道這個版本在性能和架構上都會有革命性的升級,因爲早期的版本肯定無法直接應用到項目上,各種API和實現細節也會不斷變化,我也就沒有深入去了解版本升級變化的各種細節。但現在正式版已經發布了,核心生態圈的框架適配工作(vue-router 4.0,vuex4.0,Ant Design Vue 2.0等)也接近完成,現在是時候可以評估一下將3.0版本引入到實際業務開發的可行性了。

響應式機制的革新

3.0版本最重大的變化將響應式的實現機制從2.x的Object.defineProperty方式更改爲使用ES2015的Proxy機制,這樣不但能夠提升性能,而且原來無法自動監聽的對象屬性的增刪,數組元素和長度的變化(2.x版本需要顯式調用Vue.$set方法),3.0版本可以直接自動進行監聽和跟蹤了。但也不是完全沒有代價,Proxy在IE系列瀏覽器上沒有被實現,所以3.0版本目前還無法兼容IE11瀏覽器。但似乎可以通過引入Babel-polyfill在IE11上模擬Proxy實現,這個還需要進一步確認。

Composition API

Vue 3.0現在擁有兩套相互獨立的組件構建方式,一個還是原來基於配置式的Option Api,代碼的是通過配置項的類型來組織的,比如方法就放到methods下面,數據就放到data下面,向下面這樣:

export default {
  data() {
    return { count: 4 }
  },
  created() {
     this.increment();
  },
  methods: {
    increment() {
      this.count++
      console.log("current count:"+this.count);
    }
  }
}

這套配置規則和2.x版本基本保持了一致,可以讓絕大部分老用戶無感的直接過渡到3.0版本。同時,爲了實現對TypeScript更好的結合和支持(3.0的版本本身就是使用TypeScript開發的),並且強化組件中業務邏輯的可複用性,3.0版本還提供了一套基於類和方法的全新的Composition API,可以更加靈活的構建所需要的組件。比如把上面的例子改成Composition API的寫法:

import { ref , onMounted } from 'vue'

export default {
  setup(props) {
    const counter = ref(0)  //初始化一個響應式的數字
    const increment =  () => {
      counter.value ++
      console.log("current count:"+counter.value);
    }
    onMounted(increment) //這是一個生命週期方法
    return {
         count:counter.value,
         increment
    } // 這裏返回的東西在整個組件中都可以通過this指針進行訪問
  }
  // 組件的其它部分
}

其中setup是Composition API的入口函數,會在整個組件創建之前被執行。可以看出,使用Composition API我們可以完全基於編碼的方式構建整個組件,並設置組件的各種特性,這樣非常直觀,也能很方便利用TypeScript強類型的各種好處,不像2.x版本使用TypeScript時強行利用註解來轉換這麼彆扭。Option API中可以設置的配置項,在Composition API都能找到對應的東西,比如watch,computed,還有各種生命週期方法。不過都需要顯式的import纔可以使用。有幾個函數需要重點關注一下:

  • reactive:作用於一個對象,返回這個對象的一個響應式副本。以前只有聲明在組件data配置下的屬性才具備響應式特徵,但通過這個新的函數我們可以給任意的數據增添響應式的特性,而且這個特性不會因爲參數傳遞而消失。響應式轉換是深度嵌套的,這個對象的任意嵌套屬性也會被轉換。用法如下:
const obj = reactive({ count: 0 })
obj.count ++
  • ref:這個函數上面的例子也出現過,作用和reactive類似,也是爲數據增加響應式特性,我的理解它更像一個包裝函數,主要用於對基礎數據類型(字符串,數值,布爾等等)進行封裝(reactive函數無法作用於基礎類型數據),返回一個引用對象,引用對象只有一個屬性value,指向內部所包裝的數據。如果封裝的類是一個對象,則會直接使用上面的reactive函數進行嵌套轉換。如果直接在template中使用ref的話,會自動進行拆箱,無需再調用value屬性。用法如下:
const count = ref(0)
count.value++
  • readonly:可以作用於響應式對象或普通對象,返回一個該對象的一個自讀的代理對象。如果修改對象屬性會失敗並引發警告。

TypeScript支持:

JavaScript本身是沒有編譯期檢查的,開發中小型應用還覺得沒什麼問題,但是隨着項目規模的擴大,特別是後面需要重構代碼的時候,修改對象的屬性或者類型就需要非常小心了,稍不留意漏改了引用的地方就會引發運行錯誤。這個讓我這種同時也使用Java這類強類型語言的人感覺非常無奈。而TypeScript主要就是解決這個問題的,TypeScript爲JavaScript引入了靜態類型系統,同時保留了語法上的靈活性,意味着可以在編譯期提前發現更多潛在的錯誤,有利於開發規模更大的前端應用程序。

Vue 3.0版本本身就是使用TypeScript全新開發的,意味着對TypeScript的內置支持,不需要再像2.x版本那樣需要引入第三方庫才能勉強使用TypeScript的特性了。詳細的變化可以參考 TypeScript Support | Vue.js

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章