Vue3 - v2 與 v3 寫法的差異

tags: Vue

category: Front-End

description: Vue3 - v2 與 v3 寫法的差異

created_at: 2022/07/15 16:00:00

回到 手把手開始寫 Vue3

前言

假設你已經做好了前一篇做的事 開新專案與環境設定

再來開始練習 Vue3 之前，先提一些寫法上 v2 與 v3 的差異吧

我自己是覺得基本上大多都跟 Vue2 差不多，只是在 js 的部分，寫法跟 v2 不太一樣 (這邊不細談他 v3 做了什麼優化之類的)

v2 VS v3

在 v2 ，通常都是一個巨大的 Vue 物件，中間帶著一堆 options ，例如下面這樣

(因為我也很久沒寫，只是憑感覺寫下面這段來示意，如果不能跑也很正常)

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    sayHello() {
      console.log('Hello!');
    }
  },
  mounted() {
    console.log('Mounted.');
  },
  // ...
}

大概長得像是上面這樣子。

而在 v3，則是建議改為使用 Composition 的方式，會長得像是下面這樣

(下面從官方拼貼來的，也是示意，所以如果不能跑也很正常(?))

import { reactive, onMounted } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })

    function increment() {
      state.count++
    }

    onMounted(() => {
      console.log(`the component is now mounted.`)
    })
    // don't forget to expose the function as well.
    return {
      state,
      increment
    }
  }
}

變成是以一個 setup()，裡面做該做的事，包含連生命週期也包了進去。

而在後來，官方推出了語法糖，更容易寫，變得下面這樣

<script setup>
import { onMounted, reactive } from "vue";

const state = reactive({ count: 0 });

const increment = () => {
  state.count++;
};

onMounted(() => {
  console.log(`the component is now mounted.`);
});
</script>

然後你可以再補上下面的 template，讓他運作

<template>
  {{ state.count }}
  <button @click="increment">Increment</button>
</template>

上面這一段我就確定可以跑了XD，寫起來比上面 export default，還要加上 setup() 最後還要 return，好寫了許多。

總結

這一篇先不要糾結語法上，例如什麼是 reactive，他是幹嘛的，這些之後都會提到XD，只要先著重在寫法的差異就好。

然後 Vue3 還是可以寫舊版的 options 的寫法，但是官方建議使用新版的 Composition 方式去撰寫。

不過我想當你看了上面的差異，應該也不太會想再用舊版的寫法了(?)

題外話

我覺得自己很幸運(?)，像是當初真的要去學 React 的時候，剛好就是出現 functional component 的時候，比起以前醜醜的(?) Class component，寫函數的方式更好寫，寫起來比較快樂。

而這次需要寫 Vue3 的時候，也是剛好出現了語法糖了XD，不然用到什麼都要在最後 return 出去，感覺也是很累。