iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

Déjà-vu ? 要 Vue 過才知道系列 第 5

Vue 實例介紹

忘記的總是比記住的還多,那麼記下來至少白紙黑字。

昨天的範例我們可以看到表達式{{}}雙花括號和「Vue 實例」的關聯,那麼這個我們定義的 Vue 實例裡有會有什麼呢?

我們是透過使用 Vue()建構式來建立的實例(instance)物件,在創建時至少需要傳入不同屬性和方法,之前已經介紹了最基本的兩個屬性elData,以下介紹最常見的五項,除了這五項還有不同的時間週期鉤子,這部分之後才會提到。

在 vm 的實例裡,我們需要準備我們想對組件操控的方法和顯示的資料,當然不只這些,實例有點像是控制中心,在這裏控制 V:viem 和 M:model ,我們也常會給這個實例的變數名稱為 VM 也就是 ViewModel 的簡寫。

我們來看看 Vue 實例最常用到的五項屬性與方法簡介:

el: 綁元素

el 是 element 的簡寫,用來指定 vue 管理頁面的範圍,也就是說只有包裹在#app內部的元素,才會受到這個 Vue 實例的管理。

data: { } 數據資料

data 物件的屬性大多為初始化的屬性字面值。所有這個容器(組件)的資料來源,是初始化資料狀態的物件,vm 會自動擁有 data 中所有屬性,在頁面中也可以以{{}}直接調用這些屬性。

methods: { } 方法

methods 裡面包含多個方法的物件,來提供給頁面中的v-on事件指令來綁定 callback 回調函式,
callback 函式預設有 event 參數, 但也可以指定自己的參數。所有的方法由 vue 物件來呼叫, 調用 data 中的屬性直接使用 this.xxx

computed: { } 計算屬性

computed 計算屬性在處理一些複雜邏輯時是很有用,computed 計算屬性什麼時候執行呢?它會在初始化時顯示,以及相關的 data 屬性資料發生變化時,計算並回傳目前屬性的值,也因為是透過回傳值拿到屬性值,所以 computed 計算屬性的方法也一定要有回傳 return 值才行。

因為 computed 計算屬性可以幫我們處理一些計算與邏輯,所以{{ }}雙花括號 Mustache 語法裡也不要放入太多的邏輯,否則會讓模板過重、難以理解和維護。把這些邏輯放到 computed 來會讓程式較為易讀。除此之外,computed 中的屬性不能與 data 中的屬性同名,否則是會出現錯誤的。

watch:{ } 監聽器

watch 是一個類似「監聽器」的物件,物件裡的鍵 kay 是需要觀察的表達式,值 value 是對應的回調函數,它的作用是當表達式的值發生變化後,會調用對應的回調函數完成相對應的監視操作。有沒發現和剛剛的 computed 計算屬性很像,其實利用watch也可以做到和 computed 一樣的效果。

需要特別注意的是,在 Vue 的實例中,如果需要寫方法,請務必避免以[箭頭函式]的語法來寫方法,因為箭頭函數沒有它自己的 this,所綁定到的是其定義時所在的物件,而不是使用時所在的物件,所以 this 不會指向 Vue 實例。

我們先來看看以下的例子:
Codepen

<div id="app">
  First Name :
  <input type="text" placeholder="FirstName" v-model="firstName" /><br />
  Last Name :
  <input type="text" placeholder="LastName" v-model="lastName" /><br />

  <!--fullName1是根據fistName和lastName計算產生出來的-->
  Full Name1 (computed, sens unique ) :
  <input type="text" placeholder="full Name1" v-model="fullName1" /><br />
  <!--fullName2是根據watch監看產生出來的-->
  Full Name2 (watch, deux sens) :
  <input type="text" placeholder="full Name" v-model="fullName2" /><br />
  Full Name3 (computed, deux sens) :
  <input type="text" placeholder="full Name2" v-model="fullName3" /><br />

  <!-- 顯示觀察用 -->
  <p>firstName : {{ firstName }}</p>
  <p>lastName : {{ lastName }}</p>
  <p>使用 computed -> fullName1 : {{ fullName1 }}</p>
  <p>使用 watch 監聽 ->fullName2 : {{ fullName2 }}</p>
  <p> computed -> fullName3 : {{ fullName3 }}</p>
</div>
const vm = new Vue({
  el: '#app',
  data: {
    firstName: 'A',
    lastName: 'B',
    fullName2: 'A-B',
  },
  // 計算屬性配置:值為物件
  computed: {
    // 什麼時候執行:初始化顯示/ 相關的data屬性資料發生變化
    // 計算並回傳目前屬性的值
    fullName1() {
      // 計算屬性中的一個方法,方法的回傳值作為屬性值
      return this.firstName + '-' + this.lastName;
    },

    fullName3: {
      // 自定義物件,有兩個callback 函式 get, set(value)
      // 什麼時候用? 當需要讀取當前屬性時呼叫。
      // 用來做什麼? 根據相關的資料計算並傳回當前屬性的值
      get() {
        return this.firstName + '-' + this.lastName;
      },
      // 什麼時候用? 監視當前屬性的變化,當屬性值發生變化時呼叫。更新相關的資料屬性
      // 用來做什麼? 根據相關的資料計算並傳回當前屬性的值
      set(value) {
        // value 是 fullName3 輸入的最新屬性值
        console.log('fullName3 set()', value);
        // 更新firstName和lastName
        const names = value.split('-');
        this.firstName = names[0];
        this.lastName = names[1];
      },
    },
  },
  // 寫在vm 實例的監聽,叫配置監聽,另一種監聽方法使用vm的方法
  watch: {
    // 要監聽哪個屬性? 監聽變動時通知我們,使用callback 給我們最新的值
    // 也可以同時監聽未變化的與變化後的值,以參數帶入 callback 
    firstName: function (value) {
      // firstName 發生了變化
      console.log('watch firstName', value);
      // 更新 fullName2
      this.fullName2 = value + '-' + this.lastName;
    },
    // 這段和下面用 vm.$watch() 寫的效果是一樣的。
    // lastName: function (value) {
    //   this.fullName2 = this.firstName + '-' + value
    // }
  },
});
// 實例的方法都是以 $ 開頭 第一參數監聽對象 第二參數callback函式
vm.$watch('lastName', function (value) {
  console.log('watch lastName', value);
  // 更新 fullName2
  this.fullName2 = this.firstName + ' ' + value;
});

參考:
API — Vue.js
API — Vue.js

每日一句法文有益身心:Bon appétit ! 繃.那.杯踢! 祝你有好胃口(吃飯開動前說)


上一篇
Vue 的雙花括號表達式的用法
下一篇
Vue Directives 常用的內建指令
系列文
Déjà-vu ? 要 Vue 過才知道30

尚未有邦友留言

立即登入留言