前言

前端需負責畫面上呈現的所有東西，可能是顯示靜態資料或是需要將原始資料經過繁複的運算得到結果，不可能不用到如此重要的Data 以及 Methods。

此篇範例取自 Vue.js 官網

資料 Data

延續上一篇: data 屬性用來定義狀態，並且記得需使用 function 方式！

對元件 (component) 來說，data option 是一個 function。Vue 會在建立新的元件實體時，就會去呼叫這個function。這個 function 必須回傳一個物件，Vue 會包裝這個物件成 $data，並儲存在元件實體中，我們就可以使用 實體.$data.name來取用。

ex:

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

// 以下兩種方式都是印出 data 中的 count
console.log(vm.$data.count) // => 4
console.log(vm.count)       // => 4

// 賦值給vm.count 的同時，也會同時更新 $data.count
vm.count = 5
console.log(vm.$data.count) // => 5

方法 Methods

利用 methods option，替實體增加方法，以物件表示，將需要使用的方法寫在物件中。

ex:

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  // 新增 methods option 
  methods: {
    increment() {
      // `this` 是參考這個元件實體
      this.count++
    }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

vm.increment()

console.log(vm.count) // => 5

Vue 會自動綁定 this 給 methods，所以methods 中可以存取這個實體的內容

計算 Computed

在模板中可以使用一些簡單的運算式，如果是屬於比較複雜或是重複使用的邏輯運算，建議使用computed。
ex:

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}

Computed 基本使用

ex:

Vue.createApp({
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // a computed getter, 宣告一個 publishedBooksMessage 屬性
    publishedBooksMessage() {
      // `this` 指向 vm 實體
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}).mount('#computed-basics')

<div id="computed-basics">
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</div>

computed 是當依賴的或是有連結到的值改變時，就會跟著改變。例如 vm.author.books值異動時，vm.publishedBooksMessage就會更新。

Computed Setter

Computed 屬性預設是 getter，也有 setter 可以使用。

ex:

// ...
computed: {
  fullName: {
    // getter
    // 會觀察 firstName 和 lastName 是否改變
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    // 當 fullName 被設值時，set 會被觸發
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

下篇預告

• directive

每日一句:
中秋連假啟動，存稿模式催落