Vue 3 新功能簡介 - 1

by vivid 3. 二月 2021 03:29

.NET Magazine國際中文電子雜誌
作 者：許薰尹
審 稿：張智凱
文章編號：N210222701
出刊日期： 2021/2/3

經過兩年的改版，Vue 3終於問市，號稱全面改用TypeScript改寫，在這個版本中你同樣可以選擇使用JavaScript或TypeScript來撰寫Vue應用程式，新版本對於TypeScript的支援度更佳。大部分Vue 2的程式碼與功能，在Vue 3中都依然可以使用，不必從無到有重新學習。不過並非無痛升級，還是有少部分的程式仍需要稍為加以改寫方能運作，Vue 3版同時也加入許多有趣的新功能以支援開發。目前唯一令人傷腦筋的事是：不是所有流行的Vue 插件都已經可以支援Vue 3了，例如在本文撰寫時，時下流行的Bootstrap-Vue還不支援Vue 3版。在這篇文章中，我們將來看看Vue 3這些新的功能。

第一個Vue 3範例

讓我們在HTML中直接使用CDN上的Vue 3套件來撰寫第一個Vue 3範例。CDN的網址在：

https://unpkg.com/vue@next

若在瀏覽器網址列輸入此網址，會被自動導向最新版，以本文撰寫的時間點來說，將被導向以下網址：

https://unpkg.com/vue@3.0.4/dist/vue.global.js

你可以在網頁中引用上述任一網址，參考以下範例程式碼：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge" />
    <title> Document </title>
  </head>
  <body>
    <div id = "app">
      <span @click = "sayHi"> {{ msg }} </span>
    </div>
    <script src = " https://unpkg.com/vue@3.0.4/dist/vue.global.js"> </script>
    <script>
      Vue.createApp({
        data() {
          return {
            msg: "Hello World !",
          };
        },
        methods: {
          sayHi() {
            this.msg = "Hi !";
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>

在Vue 3，你需要透過「Vue.createApp」函式來建立Vue應用程式，並叫用「mount」函式將Vue應用程式對應到DOM物件，以本例來說，利用Id選取器，對應到「<div id = "app">」標籤。

此外在Vue 2的主要容器組件（Main Container Component）定義「data」屬性時，其值是一個物件；而在Vue 3，不管是主要容器組件或一般組件，「data」永遠是一個函式（Function），回傳一個物件。這個範例執行的結果請參考下圖所示：

clip_image002

圖 1：第一個Vue 3範例。

註冊組件

Vue 3改用「createApp」函式來建立Vue應用程式，同時可以針對特定的Vue應用程式來設定組態、註冊組件、指令，而不是透過Vue的全域物件來進行註冊。例如以下範例程式碼，定義一個「welcome」組件，透過「app.component」函式來進行註冊：

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge" />
    <title> Document </title>
  </head>
  <body>
    <div id = "app">
      <welcome @change = "onChange"> </welcome>
      <div>{{msg}}</div>
    </div>
    <script src = "https://unpkg.com/vue@next"> </script>
    <script>
      var app = Vue.createApp({
        data() {
          return {
            msg: "Hello World !",
          };
        },
        methods: {
          onChange() {
            this.msg = "Hi !";
          },
        },
      });
      app.component("welcome", {
        template: '<h1 @click="sayHi"> Say Hi </h1>',
        methods: {
          sayHi() {
            this.$emit("change");
          },
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

範例中，當點選「Welcome」組件的<h1>標籤時，將會叫用「sayhi」函式，在其中觸發「change」事件。事件觸發時，將叫用Vue應用程式「onChange」函式在模版中顯示「Hi !」訊息：

這個範例執行的結果請參考下圖所示：

clip_image004

圖 2：註冊組件範例。

當你點選「Say Hi」時，下方將印出「Hi !」的訊息，請參考下圖所示：

clip_image006

圖 3：註冊組件範例。

組件事件

若為組件（Component）自訂事件，你可以在註冊組件時，設定「emits」屬性，其值是一個陣列，包含事件名稱，例如以下程式碼描述「Welcome」組件將包含「change」事件：

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge" />
    <title> Document </title>
  </head>
  <body>
    <div id = "app">
      <welcome @change = "onChange"> </welcome>
      <div>{{msg}}</div>
    </div>
    <script src = "https://unpkg.com/vue@next"> </script>
    <script>
      var app = Vue.createApp({
        data() {
          return {
            msg: "Hello World !",
          };
        },
        methods: {
          onChange() {
            this.msg = "Hi !";
          },
        },
      });
      app.component("welcome", {
        emits:['change'],
        template: ' <h1 @click="sayHi"> Say Hi </h1> ',
        methods: {
          sayHi() {
            this.$emit("change");
          },
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

 

設定「emits」屬性是選擇性非強制性的，沒有設定程式依舊可以執行，設定此屬性的好處是：可增加程式的可讀性，讓你知道此組件將會觸發哪些相關的事件。

動畫特效

「Vue」提供六個特效類別（Transition Classes），Vue 3新版本類別的名稱略有修改：

  • l 「v-enter-from」：開始狀態。注意，在Vue 2版特效類別名稱為「v-enter」。
  • l 「v-enter-active」：入場作用中（active）的狀態。
  • l 「v-enter-to」：入場結束狀態。
  • l 「v-leave-from」：出場的開始狀態。注意，在Vue 2版特效類別名稱為「v- leave」
  • l 「v-leave-active」：出場作用中（active）的狀態。
  • l 「v-leave-to」：出場結束狀態。

只要將類別的名稱略加修改，原有Vue 2的動畫特效程式碼便能直接升級到新版，參考以下範例程式碼：

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8" />
    <meta name = "viewport" content = "width = device-width, initial-scale=1.0" />
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge" />
    <title> Document </title>
    <style>
      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 2s;
      }
      .fade-enter-from,
      .fade-leave-to {
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <div id = "app">
      <button v-on:click = "show = !show"> Click </button>
      <transition name = "fade">
        <div v-if = "show" v-bind:style = "mystyle"> {{ msg }} </div>
      </transition>
    </div>
    <script src = "https://unpkg.com/vue@3.0.4/dist/vue.global.js"> </script>
    <script>
      Vue.createApp({
        data() {
          return {
            msg: " Hello World ! ",
            show: true,
            mystyle: {
              margin: "auto",
              width: "200px",
              height: "80px",
              lineHeight: "80px",
              textAlign: "center",
              backgroundColor: "lightblue",
            },
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

 

這個範例程式的執行結果請參考下圖所示，當你按下「Click」按鈕，將使用淡入淡出動畫效果，來切換顯示、隱藏「Hello World !」訊息：

clip_image008

圖 4：範例執行結果。

使用Vue CLI工具程式建立專案

要建立Vue 3專案或將Vue 3加入現有專案，現在有不同的選擇，你可以選擇以下兩種工具程式：

  • l Vue CLI。
  • l Vite。

Vue CLI是命令列介面，Command Line Interface）提供一個完整的專案開發環境，以便撰寫Vue應用程式。利用Vue Cli工具程式來建立開發專案的好處是：它可以協助建立專案之中的必要檔案與資料夾，加速開發的動作。你還可以透過它來新增、安裝想要使用的其它JavaScript程式庫（Library），透過相關套件來打包與壓縮JavaScript程式碼，以及CSS檔案。

若要使用Vue CLI來建立專案，你需要將「@vue/cli」套件安裝到開發的機器上。可以直接利用「npm」來下載「@vue/cli」以及安裝插件（Plugins）。直接在命令提示字元輸入以下指令，利用「npm」下載「vue-cli」插件（Plugins）進行安裝：

npm install -g @vue/cli

接著在命令提示視窗輸入使用以下指令，建立名為「demoprj」的專案：

vue create demoprj

輸入上述指令之後，接下來會出現對話，詢問建立Vue 2或Vue 3專案，或者要手動進行設定，你可以使用鍵盤的上、下鍵來進行選擇，例如選取「Default (Vue 3 Preview) 」項目，接下來按下「Enter」鍵，請參考下圖所示：

clip_image010

圖 5：命令執行結果。

下一步便開始安裝相依插件（Plugin），這需要花費一些時間等待。安裝完成之後，我們在命令提示視窗輸入以下指令，使用「cd」切換到「demoprj」專案所在資料夾：

cd demoprj

在命令提示視窗輸入以下指令，啟動開發階段的網站伺服器，並執行該網站首頁：

npm run serve

開發階段的網站伺服器會動態賦予網站一個埠號，以本例來說，接聽在「8080」埠，請參考下圖所示：

clip_image012

圖 6：啟動網站伺服器。

開啟瀏覽器，根據上個步驟，輸入以下網址與埠號「http://localhost:8080/」就可以看到範本網站，請參考下圖所示：

clip_image014

圖 7：Vue範例網站。

以往在Vue 2版專案中「main.js」檔案中包含如下程式來匯入「Vue」：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')


同時需手動使用「new」關鍵字來建立「Vue」實體，再透過它來組態應用程式。缺點是任何對於Vue物件的異動，都會影響每一個Vue實體。

而在Vue 3版，「main.js」程式如下，利用前文提及的「createApp」函式來建立Vue應用程式：

src\main.js

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

使用Vite工具程式建立專案

另一個建立Vue專案的替代方案是使用Vite工具程式。Vite是一個網站開發建置工具，開發時使用原生ES模組匯入（native ES Module imports），並搭配「Rollup」來打包生產階段所需的程式，支援Hot Module Replacement（簡稱HMR）、隨選編譯（on-demand compilation）...等輔助開發的功能，但目前還是Beta測試版，且只支援Vue 3版本使用。Vite假設你是針對最新、現代化的瀏覽器來設計應用程式，因此預設會將程式建置轉換成es2020版本，最低只支援到es2015版本。

若要使用Vite工具程式建立專案，可以參考以下語法，在命令提示字元使用「npm init」指定要建立一個新的vue專案，資料夾名稱便是專案的名稱：

npm init vite-app 資料夾名稱

例如以下範例，直接在命令提示字元輸入以下指令建立名為「demoprj2」的專案：

npm init vite-app demoprj2

這個命令的執行結果參考如下：

clip_image016

圖 8：命令執行結果。

接著按照命令提示字元顯示的提示，使用「cd」切換到「demoprj2」所在資料夾：

cd demoprj2

在命令提示視窗輸入以下指令，安裝專案相依的插件：

npm install

這個命令執行的結果請參考下圖所示：

clip_image018

圖 9：命令執行結果。

接著便可以在命令提示視窗輸入以下指令，啟動開發階段的網站伺服器，並執行該網站：

npm run dev

開發階段的網站伺服器會動態賦予網站一個埠號，以本例來說，接聽在「3000」埠，請參考下圖所示：

clip_image020

圖 10：命令執行結果。

開啟瀏覽器，根據上個步驟，輸入以下網址與埠號「http://localhost:3000/」就可以看到範本網站，請參考下圖所示：

clip_image022

圖 11：使用Vite工具程式建立的範本網站。

Tags:

JavaScript | VueJS | .NET Magazine國際中文電子雜誌

Permalink | 評論 (0)

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌，由恆逸資訊創立於2000，自發刊日起迄今已發行超過500篇.NET相關技術文章，擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享，歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌，讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List