Vue 3 正式版問世也一段時間了，也是時候來認識一下新朋友了，前端就是要不停地追技術啊0.0

前言

自從 Vue 3 的消息不斷傳出，相信主力開發工具為 Vue 的前端工程師也多少都有耳聞，小弟我也不例外，常常會跟朋友討論相關訊息。而當正式版（代號：one piece）發布之後，全世界前端大概都開始了尋找大秘寶之旅。

img

雖然公司目前專案大概也還不到使用 Vue 3 的時機，但是多了解新技術總是不會錯。剛好 Vue.js Taiwan 的主辦人 - Kuro 大大，在過年前出了一本 Vue 3 的書 - 重新認識 Vue.js：008天絕對看不完的 Vue.js 3 指南，想趁著過年期間來學一下，本系列就是紀錄我學習 Vue 3 的歷程，那麼就開始吧！

安裝

  • 如果想要小試一下的話，可以使用 CDN 的方式來掛載，只要加上：

    1
    <script src="https://unpkg.com/vue@next"></script>

  • 有經驗的開發者想透過 Vue-CLI 的話：

    1
    2
    $ npm install -g @vue/cli
    $ vue create 專案名稱

來寫個 Hello World 吧

以往在 Vue 2.x 版本中的寫法：

1
2
3
<div id="app">
  {{ text }}
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const vm = new Vue({
  el: '#app',
  data() {
    return {
      text: "Hello World",
    };
  },
})

// 或是使用 mount 掛載
const vm = new Vue({
  data() {
    return {
      text: "Hello",
    };
  },
})

vm.$mount("#app");

而在 Vue 3 則是加入了 Composition API 的寫法：

1
2
3
4
5
6
7
8
9
10
11
12
const { createApp, ref } = Vue;

const vm = createApp({
  setup() {
    const text = ref("Hello World");
    return {
      text
    };
  }
});

vm.mount("#app");

謎之音：不得不說，看起來還真有點像 React。

Vue 3 試玩後有感的新增特性

根據 Vue 官方文件中介紹的新增特性有不少，其中最有感的是上方有提到的 Composition API，還有 Fragment ，讓原本必須要單一根元素下編譯模板的情況下，取消了這個限制，將會變得更加直覺。

像上面的 CodePen 例子，原本在 Vue 2 中，template 中如果有一個以上的元素，那麼必須使用一個 <div> 包起來才能正常顯示。

而在 Vue 3 中，就少了這個限制：

其他還有很多新功能等待發掘，就一起來加入 Vue 3 的行列吧！