Vue 3 Composition API - 1

by vivid 3. 三月 2021 02:24

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

Vue 3 新增以函式(Function)為基礎的Composition API,它是除了Options API之外,另一種設計Vue應用程式的新選擇。Composition API不是用來取代Options API的,你仍舊可以在Vue 3應用程式之中使用Options API來進行開發。Options API與Composition API這兩者的相異之處在於:

  • Options API:在組件(Component)中設計屬性(Property)、方法(Method)、選項(Options)。
  • Composition API:在組件(Component)中設計函式(function)封裝處理邏輯。

相較之下Composition API的優點在於:

  • 較佳的程式結構性,相關的屬性(Property)、方法(Method)、偵聽器(Watcher)...等等的程式碼可以集中在一個程式區塊中,不像Options API相關的資料分散在props、資料屬性、計算屬性(Computed Properties)、偵聽器(Watcher)...等不同的程式區塊中。
  • 易於程式共享及共用。

根據官方的建議,若有以下情況,可以選擇使用Composition API來設計Vue應用程式:

  • 如果想要更好的TypeScript支援度。
  • 組件程式太過於龐大,你想要根據其提供的特性來組織其結構。
  • 需要在多個組件中共用程式碼。

本篇文章將要介紹Vue 3 新增的Composition API,以簡單的範例來看看它所提供的功能。

 

使用Vite工具程式建立專案

首先讓我們使用Vite工具程式來建立一個Vue專案。參考以下語法,在命令提示字元使用「npm init」指定要建立一個新的Vue專案,專案名稱設定為「demoAPI」:

npm init vite-app demoAPI

這個命令的執行結果參考如下圖所示:

clip_image002

圖 1:使用Vite工具程式建立專案命令執行結果。

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

cd demoAPI

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

npm install

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

clip_image004

圖 2:命令執行結果。

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

npm run dev

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

clip_image006

圖 3:啟動開發階段的網站伺服器。

在命令提示視窗切換到專案根目錄下,執行以下指令,啟動Visual Studio Code開發工具:

Code .

我們先在「components」資料夾中加入一個「Home.vue」組件,然後加入以下程式碼,顯示一個<h1>標題:

src\components\Home.vue

<template>
  <h1> Home </h1>
</template>

<script>
export default {
name : 'Home'
}
</script>

<style>

</style>

 

修改專案中「App.vue」檔案程式碼,使用「import」關鍵字匯入「Home 」組件,然後使用「components」,將「Home」註冊成區域組件:

src\App.vue

<template>
  <home />
</template>

<script>
import Home from "./components/Home.vue";

export default {
  name: "App",
  components: {
    Home,
  },
};
</script>

若沒有關掉瀏覽器的話,Vite會自動更新顯示新程式的執行結果,而「Home.vue」組件的執行結果,請參考下圖所示:

clip_image008

圖 4:「Home.vue」組件。

setup Component Option

Composition API中第一個要認識的函式是「setup」組件選項(Component Option),它是一個名為「setup」的函式,「setup」函式的長像如下,在函式中可以定義資料(data)、計算屬性(Computed Property)、偵聽器(Watcher)、方法(method)、生命周期勾子函式(lifecycyle hooks)等等,底下是它參考語法:

export default {
  setup() {
    // data

    // computed property

    //watcher
   
    // method

    // lifecycyle hooks

  },

 

「setup」函式可視為Composition API的程式進入點,它會在以下程式執行之前先執行,並且在「setup」函式之中不可以使用「this」來存取組件的資料:

  • l 組件(Components)。
  • l props。
  • l 資料(data)。
  • l 方法(method)。
  • l 計算屬性(Computed Property)
  • l 生命周期方法(Lifecycle method)

「setup」函式有兩個選擇性的引數(argument):第一個引數是:「props」;第二個選擇性引數是「context」,它是一個標準的JavaScript物件,可以用來存取組件的屬性,這些屬性在Option API中是採用「this」關鍵字來進行存取,包含「attrs」、「slots」、「parent」、「root」、「emit」等等。

我們可以做個實驗來了解「setup」函式,修改「Home.vue」檔案程式碼,加入「setup」、「created」、「mounted」函式,各個函式內都加入一行程式碼,印出一個字串,以區別哪個函式被叫用:

src\components\Home.vue

<template>
  <h1> Home </h1>
</template>

<script>
export default {
  name: "Home",
  setup() {
    console.log( "setup" );
  },
  created() {
    console.log( "created" );
  },
  mounted() {
    console.log( "mounted" );
  },
};
</script>

<style>
</style>


這個範例程式的執行結果參考如下圖所示,從執行的結果得知,「setup」函式會在其它生命周期方法執行之前先執行。

clip_image010

圖 5:「setup」函式會在其它生命周期方法執行之前先執行。

宣告變數

在「setup」函式之中,可以撰寫標準的JavaScript程式碼,例如宣告變數來暫存資料。舉例來說,修改「Home.vue」程式碼,使用「let」關鍵字宣告「employeeName 」、「age」、「isMarried 」三種不同型別的變數並初始化值為「'mary'」、「50」、「true」,為了要在組件的模版(Template)中使用這些變數,「setup」函式需要回傳一個物件,將這些變數包裝在此物件的「employeeName 」、「age」、「isMarried 」三個屬性中:

src\components\Home.vue

<template>
  <h1> Home </h1>
  <p>
    Employee Name  : {{ employeeName}}
  </p>
  <p>
     Age  : {{ age}}
  </p>
  <p>
    Is Married  : {{ isMarried }}
  </p>
</template>

<script>
export default {
  name: "Home",
   setup() {
    let employeeName = 'mary';
    let age = 50;
    let isMarried = true;
    return {
      employeeName : employeeName ,
      age : age ,
      isMarried : isMarried
    }
  }
};
</script>

<style>
</style>

 

而在HTML模板(Template)中便可使用 {{ }} 語法來顯示變數的值,這個範例程式的執行結果參考如下圖所示::

clip_image012

圖 6:在模板(Template)顯示變數的值。

在ECMAScript 2015語法中,物件屬性名稱若和提供屬性值的變數名稱相同,則可以省略指派變數值的語法,因此上例中「setup」函式回傳的物件的語法可以更為精簡,參考以下範例程式碼:

src\components\Home.vue

 

<template>
  <h1> Home< /h1>
  <p>
    Employee Name  : {{ employeeName }}
  </p>
  <p>
     Age  : {{ age }}
  </p>
  <p>
    Is Married  : {{ isMarried }}
  </p>
</template>

<script>
export default {
  name: "Home",
   setup() {
    let employeeName = 'mary';
    let age = 50;
    let isMarried = true;
    return {
      employeeName ,
      age ,
      isMarried
    }
  }
};
</script>

<style>
</style>

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

Vue 3 新增以函式(Function)為基礎的Composition API,它是除了Options API之外,另一種設計Vue應用程式的新選擇。Composition API不是用來取代Options API的,你仍舊可以在Vue 3應用程式之中使用Options API來進行開發。Options API與Composition API這兩者的相異之處在於:

  • Options API:在組件(Component)中設計屬性(Property)、方法(Method)、選項(Options)。
  • Composition API:在組件(Component)中設計函式(function)封裝處理邏輯。

相較之下Composition API的優點在於:

  • 較佳的程式結構性,相關的屬性(Property)、方法(Method)、偵聽器(Watcher)...等等的程式碼可以集中在一個程式區塊中,不像Options API相關的資料分散在props、資料屬性、計算屬性(Computed Properties)、偵聽器(Watcher)...等不同的程式區塊中。
  • 易於程式共享及共用。

根據官方的建議,若有以下情況,可以選擇使用Composition API來設計Vue應用程式:

  • 如果想要更好的TypeScript支援度。
  • 組件程式太過於龐大,你想要根據其提供的特性來組織其結構。
  • 需要在多個組件中共用程式碼。

本篇文章將要介紹Vue 3 新增的Composition API,以簡單的範例來看看它所提供的功能。

 

使用Vite工具程式建立專案

首先讓我們使用Vite工具程式來建立一個Vue專案。參考以下語法,在命令提示字元使用「npm init」指定要建立一個新的Vue專案,專案名稱設定為「demoAPI」:

npm init vite-app demoAPI

這個命令的執行結果參考如下圖所示:

clip_image002

圖 1:使用Vite工具程式建立專案命令執行結果。

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

cd demoAPI

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

npm install

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

clip_image004

圖 2:命令執行結果。

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

npm run dev

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

clip_image006

圖 3:啟動開發階段的網站伺服器。

在命令提示視窗切換到專案根目錄下,執行以下指令,啟動Visual Studio Code開發工具:

Code .

我們先在「components」資料夾中加入一個「Home.vue」組件,然後加入以下程式碼,顯示一個<h1>標題:

src\components\Home.vue

<template>
  <h1> Home </h1>
</template>

<script>
export default {
name : 'Home'
}
</script>

<style>

</style>

 

修改專案中「App.vue」檔案程式碼,使用「import」關鍵字匯入「Home 」組件,然後使用「components」,將「Home」註冊成區域組件:

src\App.vue

<template>
  <home />
</template>

<script>
import Home from "./components/Home.vue";

export default {
  name: "App",
  components: {
    Home,
  },
};
</script>

若沒有關掉瀏覽器的話,Vite會自動更新顯示新程式的執行結果,而「Home.vue」組件的執行結果,請參考下圖所示:

clip_image008

圖 4:「Home.vue」組件。

setup Component Option

Composition API中第一個要認識的函式是「setup」組件選項(Component Option),它是一個名為「setup」的函式,「setup」函式的長像如下,在函式中可以定義資料(data)、計算屬性(Computed Property)、偵聽器(Watcher)、方法(method)、生命周期勾子函式(lifecycyle hooks)等等,底下是它參考語法:

export default {
  setup() {
    // data

    // computed property

    //watcher
   
    // method

    // lifecycyle hooks

  },

 

「setup」函式可視為Composition API的程式進入點,它會在以下程式執行之前先執行,並且在「setup」函式之中不可以使用「this」來存取組件的資料:

  • l 組件(Components)。
  • l props。
  • l 資料(data)。
  • l 方法(method)。
  • l 計算屬性(Computed Property)
  • l 生命周期方法(Lifecycle method)

「setup」函式有兩個選擇性的引數(argument):第一個引數是:「props」;第二個選擇性引數是「context」,它是一個標準的JavaScript物件,可以用來存取組件的屬性,這些屬性在Option API中是採用「this」關鍵字來進行存取,包含「attrs」、「slots」、「parent」、「root」、「emit」等等。

我們可以做個實驗來了解「setup」函式,修改「Home.vue」檔案程式碼,加入「setup」、「created」、「mounted」函式,各個函式內都加入一行程式碼,印出一個字串,以區別哪個函式被叫用:

src\components\Home.vue

<template>
  <h1> Home </h1>
</template>

<script>
export default {
  name: "Home",
  setup() {
    console.log( "setup" );
  },
  created() {
    console.log( "created" );
  },
  mounted() {
    console.log( "mounted" );
  },
};
</script>

<style>
</style>

 

這個範例程式的執行結果參考如下圖所示,從執行的結果得知,「setup」函式會在其它生命周期方法執行之前先執行。

clip_image010

圖 5:「setup」函式會在其它生命周期方法執行之前先執行。

宣告變數

在「setup」函式之中,可以撰寫標準的JavaScript程式碼,例如宣告變數來暫存資料。舉例來說,修改「Home.vue」程式碼,使用「let」關鍵字宣告「employeeName 」、「age」、「isMarried 」三種不同型別的變數並初始化值為「'mary'」、「50」、「true」,為了要在組件的模版(Template)中使用這些變數,「setup」函式需要回傳一個物件,將這些變數包裝在此物件的「employeeName 」、「age」、「isMarried 」三個屬性中:

src\components\Home.vue

<template>
  <h1> Home </h1>
  <p>
    Employee Name  : {{ employeeName}}
  </p>
  <p>
     Age  : {{ age}}
  </p>
  <p>
    Is Married  : {{ isMarried }}
  </p>
</template>

<script>
export default {
  name: "Home",
   setup() {
    let employeeName = 'mary';
    let age = 50;
    let isMarried = true;
    return {
      employeeName : employeeName ,
      age : age ,
      isMarried : isMarried
    }
  }
};
</script>

<style>
</style>

 

而在HTML模板(Template)中便可使用 {{ }} 語法來顯示變數的值,這個範例程式的執行結果參考如下圖所示::

clip_image012

圖 6:在模板(Template)顯示變數的值。

在ECMAScript 2015語法中,物件屬性名稱若和提供屬性值的變數名稱相同,則可以省略指派變數值的語法,因此上例中「setup」函式回傳的物件的語法可以更為精簡,參考以下範例程式碼:

src\components\Home.vue

 

<template>
  <h1> Home< /h1>
  <p>
    Employee Name  : {{ employeeName }}
  </p>
  <p>
     Age  : {{ age }}
  </p>
  <p>
    Is Married  : {{ isMarried }}
  </p>
</template>

<script>
export default {
  name: "Home",
   setup() {
    let employeeName = 'mary';
    let age = 50;
    let isMarried = true;
    return {
      employeeName ,
      age ,
      isMarried
    }
  }
};
</script>

<style>
</style>

 

宣告函式

在「setup」函式之中可以使用標準的JavaScript語法宣告函式,為了要在模版(Template)之中使用到此函式,需要在「setup」函式最後回傳此函式。參考以下範例程式碼,模版(Template)之中包含一個按鈕(Button),我們註冊了按鈕的「click」事件,當事件觸發時,將叫用「buttonClick 」函式,印出「click」訊息到除錯視窗:

src\components\Home.vue

<template>
  <h1> Home </h1>
  <p> Employee Name : {{ employeeName }} </p>
  <p> Age : {{ age }} </p>
  <p> Is Married : {{ isMarried }} </p>
  <button @click = "buttonClick"> Click </button>
</template>

<script>
export default {
  name: "Home",
  setup() {
    let employeeName = "mary";
    let age = 50;
    let isMarried = true;
    const buttonClick = () => {
      console.log( "click" );
    };
    return {
      employeeName,
      age,
      isMarried,
      buttonClick
    };
  },
};
</script>

<style>
</style>

這個範例程式的執行結果參考如下:

clip_image014

圖 7:宣告函式。

預設使用「let」關鍵字宣告的變數不具備響應式(reactive)能力,也就是說當變數的值修改時,並無法同步自動更新到模板(Template)中顯示。我們可以修改程式碼如下,在按下畫面中的按鈕時,變更「employeeName 」、「age」、「isMarried 」三個變數的值,需注意的是:「setup」函式之中不可以使用「this」關鍵字來存取「setup」函式中定義的變數。

src\components\Home.vue

<template>
  <h1> Home </h1>
  <p> Employee Name : {{ employeeName }} </p>
  <p> Age : {{ age }} </p>
  <p> Is Married : {{ isMarried }} </p>
  <button @click = "buttonClick"> Click </button>
</template>

<script>
export default {
  name: "Home",
  setup() {
    let employeeName = "mary";
    let age = 50;
    let isMarried = true;
    const buttonClick = () => {
      console.log( "click" );
      employeeName = "candy";
      age = 60;
      isMarried = false;
      console.log( employeeName );
      console.log( age );
      console.log( isMarried );
    };
    return {
      employeeName,
      age,
      isMarried,
      buttonClick,
    };
  },
};
</script>

<style>
</style>

 

這個範例程式的執行結果參考如下圖所示,當你按下畫面中的按鈕,我們的程式確實修改了「employeeName 」、「age」、「isMarried 」三個變數的值,但是瀏覽器並不會顯示這些異動過的最新值,也就是說使用「let」宣告的變數不具備響應式功能:

clip_image016

圖 8:使用「let」宣告的變數不具備響應式功能。

從瀏覽器的除錯視窗中可以發現,變數的值變更為新值,網頁中顯示的還是舊資料。

使用「ref」函式

Vue 3新增了「ref」函式,用來建立reactive reference物件,並設定reactive reference的「value」屬性值,在「setup」函式中使用「ref」函式宣告的reactive reference具有響應式(reactive)能力。

在「setup」函式中應該使用「ref」函式定義基礎資料型別,支援以下:

  • Null
  • String
  • BigInt
  • Symbol
  • Boolean
  • Number
  • Undefined

讓我們修改上例程式碼,使用「const」關鍵字來宣告「employeeName 」、「age」、「isMarried 」三個reactive reference物件,其「value」屬性分別利用「ref」函式儲存「mary」、「50」、「true」三種不同型別的資料。使用「const」關鍵字表示所建立的reactive reference物件是一個常數,不能變動,但你可以變更reactive reference物件的「value」屬性值。同時為了要使用到「ref」函式,你需要加上這一行「import { ref } from 'vue'」程式碼從 「vue」 匯入「ref」函式:

src\components\Home.vue

<template>
  <h1> Home </h1>
  <p> Employee Name : {{ employeeName }} </p>
  <p> Age : {{ age }} </p>
  <p> Is Married : {{ isMarried }} </p>
  <button @click = "buttonClick"> Click </button>
</template>

<script>
import { ref } from 'vue'
export default {
  name: "Home",
  setup() {
    const employeeName = ref( "mary" );
    const age = ref( 50 );
    const isMarried = ref( true );
    const buttonClick = () => {
      console.log( "click" );
      employeeName.value = "candy";
      age.value  = 60;
      isMarried.value  = false;
      console.log( employeeName.value );
      console.log( age.value );
      console.log( isMarried.value );

    };
    return {
      employeeName,
      age,
      isMarried,
      buttonClick
    };
  },
};
</script>

<style>
</style>

 

在「setup」函式中要修改reactive reference物件的值,須透過「value」屬性,但在HTML 模板中則不需要透過「value」屬性,直接使用reactive reference物件的名稱存取即可。使用「ref」函式來宣告的reactive reference物件,它們的「value」值將會是響應式(reactive)資料,當組件執行時,可使用程式碼來修改它們的值,例如在此範例中的「buttonClick 」函式所示,當「value」屬性值修改時,瀏覽器中將會顯示出最新的資料,請參考下圖所示:

clip_image018

圖 9:使用「ref」函式宣告的reactive reference具有響應式(reactive)能力。

Template Refs

除了「ref」函式之外,Vue 3還新增Template Refs,可以使用「ref」 attribute參考到模板(Template)中的HTML項目,或組件的實體(Component Instance)。

修改「Home.vue」程式碼,在「setup」函式中使用「const」宣告一個「div」常數,並利用「ref」函式初始化為「null」,為了要在模板(Template)使用到它,需要在「setup」函式最後回傳「div」,如此模板中的「div」就可以套用「 ref="div"」attribute連結到使用「const」宣告的「div 」常數:

src\components\Home.vue

<template>
  <h1> Home </h1>
  <div ref="div" >
    <p> Employee Name : {{ employeeName }} </p>
    <p> Age : {{ age }} </p>
    <p> Is Married : {{ isMarried }} </p>
  </div>
  <button @click = "buttonClick"> Click </button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Home",
  setup() {
    const employeeName = ref( "mary" );
    const age = ref( 50 );
    const isMarried = ref( true );
    const div = ref( null );
    const buttonClick = () => {
      console.log( div );
      console.log( div.value );
    };
    return {
      employeeName,
      age,
      isMarried,
      buttonClick,
      div,
    };
  },
};
</script>

<style>
</style>

 

我們在「buttonClick 」函式之中印出「div」與「div.value」,從瀏覽器除錯視窗可以看到,「div」是一個「RefImpl」物件,而其「value」屬性包含真正的DOM項目(Element),圖所示:

clip_image020

圖 10:使用Template Refs。

既然可以存取到DOM項目(Element),我們便可一如往常的利用JavaScript程式碼來操作它們,例如以下程式碼,設定「div」的背景顏色為「yellow」:

src\components\Home.vue

<template>
  <h1> Home </h1>
  <div ref="div" >
    <p> Employee Name : {{ employeeName }} </p>
    <p> Age : {{ age }} </p>
    <p> Is Married : {{ isMarried }} </p>
  </div>
  <button @click = "buttonClick"> Click </button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Home",
  setup() {
    const employeeName = ref( "mary" );
    const age = ref( 50 );
    const isMarried = ref( true );
    const div = ref( null );
    const buttonClick = () => {
      console.log( div );
      console.log( div.value );
      div.value.style.backgroundColor = 'yellow'
    };
    return {
      employeeName,
      age,
      isMarried,
      buttonClick,
      div
    };
  },
};
</script>

<style>
</style>

這個範例程式的執行結果參考如下圖所示:

clip_image022

圖 11:存取DOM項目(Element)。

要特別注意的是,「setup」函式沒有執行到return程式之前,你無法取得使用Template Refs關聯到「div」的DOM項目。例如讓我們修改「Home.vue」程式碼,將「console.log」這兩行程式碼搬到「buttonClick」函式之外:

src\components\Home.vue

<template>
  <h1> Home </h1>
  <div ref="div" >
    <p> Employee Name : {{ employeeName }} </p>
    <p> Age : {{ age }} </p>
    <p> Is Married : {{ isMarried }} </p>
  </div>
  <button @click = "buttonClick"> Click </button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Home",
  setup() {
    const employeeName = ref( "mary" );
    const age = ref( 50 );
    const isMarried = ref( true );
    const div = ref( null );
    console.log( div );
    console.log( div.value );
    const buttonClick = () => {
      div.value.style.backgroundColor = "yellow";
    };
    return {
      employeeName,
      age,
      isMarried,
      buttonClick,
      div,
    };
  },
};
</script>

<style>
</style>

這個範例程式執行後,使用「console.log)」這行程式印出「div」可得知它是一個reactive reference物件,而「div.value」的值將會是「null」,這是因為還沒有執行到「setup」函式的「return」這行程式碼,「div」常數和模板(Template)中的「div」標籤還沒有連結在一起的關係,請參考下圖所示:

clip_image024

圖 12:範例程式的執行結果。

使用「v-model」指令(directive)

指令(Directive)是以「v-」開頭的特殊Attribute,指令的值通常是一個單行的JavaScript表達式(Expression),除了「v-for」指令例外。HTML表單輸入項目(Form Input)、選擇框(select)、多行文字(textarea)方塊等HTML項目,可以利用「v-model」指令建立與「Vue」之間的雙向數據綁定功能,設定「v-model」指令之後,「Vue」便會監聽輸入事件來更新資料。

我們可以使用「v-model」指令(directive)綁定到reactive reference 物件,參考以下範例程式碼:

src\components\Home.vue

<template>
  <h1> Home </h1>
  <div ref = "div" >
    <p> Employee Name : {{ employeeName }} </p>
    <p> Age : {{ age }} </p>
    <p> Is Married : {{ isMarried }} </p>
  </div>
  <button @click = "buttonClick"> Click </button>
  <hr />
  <div>
    Employee Name : <input type = "text=" v-model = "employeeName" /> <br />
    age : <input type = "number=" v-model = "age" /><br />
    isMarried : <input type = "checkbox" v-model = "isMarried" /><br />
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  name: "Home",
  setup() {
    const employeeName = ref( "mary" );
    const age = ref( 50 );
    const isMarried = ref( true );
    const div = ref( null );
    const buttonClick = () => {
      console.log( div );
      console.log( div.value );
    };
    return {
      employeeName,
      age,
      isMarried,
      buttonClick,
      div,
    };
  },
};
</script>

<style>
</style>

 

當<input>方塊輸入的值變動時,會即時反應到模板上方顯示,請參考下圖所示:

clip_image026

圖 13:使用「v-model」指令(directive)。

使用物件

若組件中的程式碼想要儲存多個值,可以利用物件。也就是說宣告一個reactive reference物件,其「value」屬性存放的是物件,參考以下範例程式碼:

src\components\Home.vue

<template>
  <h1> Home </h1>
  <div>
    <p> Employee Name : {{ employee.employeeName }} </p>
    <p> Age : {{ employee.age }} </p>
    <p> Is Married : {{ employee.isMarried }} </p>
  </div>
  <button @click = "buttonClick"> Click </button>
</template>
<script>
import { ref } from "vue";
export default {
  name: "Home",
  setup() {
    const employee = ref({
      employeeName : "mary",
       age : 50,
       isMarried : true,
    });

    const buttonClick = () => {
      employee.value.employeeName = "candy";
      employee.value.age = 60;
      employee.value.isMarried = false;
    };
    return {
      employee,
      buttonClick,
    };
  },
};
</script>

<style>
</style>

這個範例程式的執行結果參考如下圖所示:

clip_image028

圖 14:使用物件儲存多個值。

當按下畫面中的按鈕,畫面將顯示變更的值,請參考下圖所示:

clip_image030

圖 15:顯示異動的值。

Tags:

.NET Magazine國際中文電子雜誌 | JavaScript | VueJS | 許薰尹Vivid Hsu

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List