资料呈现与运算处理

前言

前端需负责画面上呈现的所有东西，可能是显示静态资料或是需要将原始资料经过繁复的运算得到结果，不可能不用到如此重要的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]
    }
  }
}
// ...