Vue学习（3）-method、computed、watch

依旧在App.vue中书写。

method

我们在HTML中用v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。然后在menthod中定义方法。
v-on：‘事件’ 可缩写为 @‘事件’

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

  Submit

// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

computed

计算属性（computed）中绑定的也是方法。

  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"

// ...
computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }

那么这个时候我们就发现了，computed好像和methods没什么区别，因为methods也可以实现同样的效果。

Reversed message: "{{ reversedMessage() }}"
// ...
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

那么两者间到底有什么区别呢？

1. computed的方法是自执行的，而methods的方法需要调用才执行；
2. computed是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值；
3. methods每次调用都要重新执行一次。

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

watch

watch里面定义的也是方法，当它监测的值发生变化就会执行，然后相应的改变其他的值。

    
    

    
//...
data () {
    return {
      message: 'hello',
      firstName: 'Bob',
      lastName: 'Justin',
      fullName: 'Bob Justin'
    }
  },
watch: {
    firstName (val, old) {
      this.fullName = val + ' ' + this.lastName
      console.log(old)
    },
    lastName: function (val, old) {
      this.fullName = this.firstName + ' ' + val
      console.log(old)
    }
  }

可以对watch中的方法传参，第一个表示当前值，第二个表示修改前的值。
那么computed和watch都是监测数据发生改变后执行，那么两者有什么区别呢?
computed书写更简单，watch更易懂。

computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

三者区别：
1.watch只有setter属性，可以接受参数，但没有return；
2.computed默认只有getter属性，不接收参数，必须有return；
3.methods默认setter和getter都有。