[Day27] Vue 3 - 方法

今天练习到 Vue 里面的 methods（方法），过去使用纯 JS 监听事件触发後，就会透过函式来做一连串的取值操作，而 methods 就是收集各种方法的区块。

Methods

先来看一段程序码

// JS
const vm = Vue.createApp({
  data () {
    return {
      money: 100,
      times: 100
    }
  },
  methods: { //此处开始为 methods 区域
    rewards () {
      return this.money * this.times;
    }
  }
}).mount('#app');

// HTML
<div id="app">
  <p> 投入： {{ money }} 元</p>
  <p> 倍率： {{ money }} </p>
  <p> 奖金： {{ rewards() }} 元</p> <!--此处呼叫 methods方法-->
</div>

• 在 methods 中要使用 data 里面的属性需要使用 this 来存取。
• 在 HTML 使用 methods 时需要有小括号（函式的方式），也可以设计成带参数的方式执行。

Computed

Computed 和 Methods 写法可以说是一模一样，下面是一段范例：

// JS
const vm = Vue.createApp({
  data () {
    return {
      money: 100,
      times: 100
    }
  },
  computed: { // 这里不一样而已
    countRewards () {
      return this.money * this.times;
    }
  }
}).mount('#app');

Methods 与 Computed 差异比较

• 两者的差异在於， computed 会把计算後的结果暂存起来，如果里面使用的资料没有变动，就不会重复执行；反之，methods 只要在 HTML 里面被使用几次就会执行几次。

• 在实际使用上，如果是相同的计算重复使用，可以使用 computed 来节省效能。

• computed 的缺点是无法带入参数，所以在设计时需考量，如果有有带入参数的需求，就应使用 methods。