Vue 實例介紹

第 12 屆 iThome 鐵人賽

DAY 5

Modern Web

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

12th鐵人賽 vue.js

tsuifei

2020-09-20 23:39:58

1606 瀏覽

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

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

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

在 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