iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 12

Day_12 : 讓 Vite 來開啟你的Vue 之 來!開始你的 Vue 3

Hi Dai Gei Ho~ 我是Winnie~

進入Vue章節前的 溫提醒:
在之後的文章中,預計不會針對 Vue 的基本使用做深入的講解(如:v-model、v-html 等),所以 對Vue 較不熟悉的捧油,建議可以先補充下 Vue 基本入門,會比理解之後的範例。

好的~溫提醒說完了,那我們要開始來說說 Vue 3 了。

Vue 3

Vue3 正式版於 2020/09/18釋出,掐指一算 差不多也滿一年了,而這次的改版 ,其底層核心改使用TypeScript來撰寫,同時也針對過去的遇到的問題 改善了以下幾點:

  • 讓編譯後的檔案容量更小,效能變更快
  • 程式碼的重複使用性與閱讀性更高
  • 加強對 TypeScript的支援

同時還增加了幾點 新特性

  1. 引入Fragment,不限制component 只能是單一節點
  2. 狀態的響應偵測從 Object.defineProperty 改為Proxy API,主要可以讓執行效能更好,同時也解決過去物件、陣列沒有辦法深度偵測的問題
  3. 新增setup、ref用法,更有效進行開發

實體物件

而除了以上增加新特性之外,在創建Vue實體物件的用法也有著改變,不知道大家記不記得,一開始使用Vue時需創建一個實體物件,過去我們是使用 new Vue({})方式來創建,接著再透過$mount來掛載至網頁的某個節點。如果有印象,這個就是 屬於 Vue2.x的用法

用法範例如下:

//Vue2.x
const vm = new Vue({
 data:{
  count:1
 }
})

vm.$mount('#app');

而在 Vue3 之後,實體物件的創建也就改成了以下createAPP({})的用法:

//vue3
const vm = createApp({
 data(){
   return{
     count:1
   }
 }
})

vm.mount('#app'); //

ps.這邊需注意,在掛載至跟節點時,Vue3的mount 是不需$符號的

Composition API

接著,在 Vue3 眾多特點之中,其中最大特別之處就非 Composition API莫屬了。

Composition API 為 Vue 元件的另一種編寫方式,而其出現的目的主要是解決 Vue2 Option API 會造成component 與 component 之間 程式碼與 邏輯結構 難以被抽出重複利用的問題,

Option API用法如下:

//option
export default {
  data() {
    return { a: 1 }
  },
  methods(){},
  computed: {
    // get only
    aDouble() {
      return this.a * 2
    }
  },
  props:{}
}

所以 Composition API 所能提供的最大功用 就是能將 程式能依功能分類來使用,可增加閱讀性之外 同時還可以 跨元件使用來增加複用性

Composition API用法如下:

//Composition api

export default {
 name:'APP',
 props:[],
 setup(props,context){
    
 }
}

恩~相信看到這邊,你對於Option API 與 Composition API 的差別應該還是很模糊,但別擔心 在明天文章中我們 將會(江蕙?) 針對Option API 程式範例 來深入點 來探討 所Option API哪裡出問題,大家應該就能在理解一點了

以上就是今天文章內容,針對 Vue3 新增特點的介紹,如有問題,再請各位客官多多指教了 謝謝。


上一篇
Day_11 : 讓 Vite 來開啟你的 Vue 之 Config 常見配置 (Vite 最終篇 XD)
下一篇
Day_13 : 讓 Vite 來開啟你的Vue 之 Option API 與 Mixins
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30

尚未有邦友留言

立即登入留言