學習完 Vue 之後，想要透過單元測試守護你的專案，但又不知道從何起手？
別擔心，快來訂閱作者最新系列文 《小白也能輕鬆瞭解的 Vue3 單元測試！》
讓你的 Vue 專案更上一層樓！

一轉眼周末又要結束了，這幾天前面介紹的主要都是以 HTML 中如何使用樣板語法、指令與修飾符來顯示資料內容，而今天將會介紹如何在 JavaScript 中操作以及修改 Vue.js 實體中資料的內容。

data 資料

data 是用來儲存資料的地方，而 Vue.js 會透過前面介紹的樣板語法，將其對應的值輸出顯示到 DOM 上，並且最重要的是，只要一更動 data 裡面的資料，Vue.js 將會透過內部已經幫我們處理好的邏輯，去比對 HTML 哪邊需要更改，實現部分渲染，達成資料驅動畫面的概念。範例：

HTML 部分：

<div id="app">
    {{ a }}
</div>

JavaScript部分：

let vm = new Vue({
  el: '#app',
  data: {
    a: 1,
    b: {
        b1: 'something',
        b2: 'another
    }
  }
})

首先如同前面介紹，使用 new 關鍵字去創建一個實體，並使用花括弧傳入我們所需要的參數，例如在 el 中去填入我們要渲染的元素範圍 #app ，在 data 中則一樣是透過物件再把我們要的資料配對給他，我們就可以在 HTML 部分以樣板語法取得對應的值。

computed 計算屬性

前面提到的 data 主要是用來存放一些資料，如果我們今天在顯示資料前需要先計算 data 的內容再顯示到畫面上時，就可以使用 computed 來幫助我們，例如以匯率計算來說：

<div id="app">
  目前擁有台幣：{{ money }}元。
  轉換為日幣後：{{ money / 0.3}}日圓。
</div>

let vm = new Vue({
  el:'#app',
  data:{
    money:1000,
  }
})

原先我們可能在樣板語法中直接去計算內容，但是如果要重複使用的話將會大量的複製貼上，此時便可以使用computed來計算，修改後如下：

<div id="app">
  目前擁有台幣：{{ money }}元。
  轉換為日幣後：{{ JPY }}日圓。
</div>

let vm = new Vue({
  el:'#app',
  data:{
    money:1000,
  },
  computed:{
    JPY : function(){
      return this.money / 0.3
    }
  }
})

這樣改變後，在 HTML 的部分將更加的直觀，而將計算的方法寫在實體當中，需要取得的時候如同在 data 的資料，將對應的 key（JPY）寫在樣板語法鐘即可。

而使用這個方法要注意的地方在於，若其計算的途中沒有使用到 data 中的任何一筆資料時，資料將會無法更新！，因此若確定每次使用都會更新到的部分建議還是使用 methods 的方法來驅動。

methods 方法

與computed不一樣的是，methods可以直接供 Vue.js 的實體來使用，也可以藉由指令中的表達式使用，更重要的是還能將參數帶入其函式中( computed 是無法傳入參數的)。

範例如下：

在這個完整範例中，原先按鈕會顯示 data 中的 text資料，按下按鈕後透過指令 v-on:click 縮寫（@click）去執行 methods 裡面的 handleOnClick，並將參數 'Shawn'傳到函式中，最後透過 this.text 方法取得 data 裡面的 text 並且更改為我們需要的內容。

  <div id="app">
    <button @click="handleOnClick('Shawn')" type="button">{{text}}</button>
  </div>

let vm = new Vue({
  el:'#app',
  data:{
    text:'Hello Vue!',
  },
  methods:{
    handleOnClick : function(name){
      return this.text = `Hello ${name}!`
    }
  }
})

而methods要注意的地方是，函式的部分不能使用 ES6 中的箭頭函式arrow function，否則this指向 window 最後拋出undefined。

watcher 監聽器

watch的用法如同監聽器一樣，在與其綁定的資料有更動時會執行對應的函式，需要異步執行資料變化時便可以使用，而參考官網的範例如下：

<div id="app">
  <p>
    今晚晚餐吃這個：
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

let vm = new Vue({
  el:'#app',
  data:{
    question:'',
    answer:'讓我來幫你決定要吃什麼吧！',
  },
  watch:{
    question : function(){
      this.getAnswer()
    }
  },
  methods:{
    getAnswer:function(){
      var self = this
      fetch('https://yesno.wtf/api')
      .then(res=>res.json())
      .then(res=>{
        self.answer = res.answer
      })
    }
  }
})

這個範例是透過 yesno 網站所提供的 API 去實作一個決定晚餐要不要吃這個的簡單應用程式，使用者在 input 輸入問題後，透過上篇提過的 v-model 雙向綁定資料到data中的question，接著資料內容被改變後去驅動監聽器去啟動對應的方法並啟動 methods 裡面的 getAnswer ，接著 getAnswer 發送了一個request到https://yesno.wtf/api並得到一個回應後，我們再將回應的資料傳回去 data 中的 answer。

以上這幾個用法是屬於 Vue.js 實體的一些相關用法，結合樣板語法、指令與修飾符後我們已經可以完成一個簡單的小應用了，而明天我們將繼續介紹 Vue.js 的生命週期！

橘橘也要趁這個周末好好來大睡一波啦