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國際中文電子雜誌

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List