computed

计算属性， computed 是用来计算出一个值，这个值在调用的时候会根据依赖的数据显示新的计算结果并自动缓存。如果依赖不变，computed中的值就不会重新计算。注意：不需要加(),

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

计算属性和方法的区别

计算属性是基于他们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时，才会重新求值（也就是说，计算属性会把数据进行缓存）
而方法不会把数据进行缓存，所以用计算属性效率会更高点

watch

watch 是用来监听数据的。主要用法是当某个数据变化后，做一些操作。当 data 的数据发生变化时，就会发生一个回调，他有两个参数，一个val（修改后的 data 数据），一个oldVal（原来的 data数据）

监听，如果某个属性依赖变化了就执行回调。它有俩个属性
1. immediate 表示数据是否在第一次渲染的时候立即执行该函数。
2. deep , 如果我们监听一个对象（不包括数组），是否要看对象里面的属性的变化。
除了 watch 选项之外，您还可以使用命令式的 vm.$watch API。可以查看官网文档是一样作用

案列

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += 'hi'">obj.a + 'hi'</button>
      <button @click="obj = {a:'a'}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 变了")
    },
      deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 变了")
    },
      immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
    }
  }
}).$mount("#app");

总结

如果一个数据需要经过复杂计算就用 computed
如果一个数据需要在发生变化时做一些操作就用 watch

Vue computed 和watch 简述

computed

计算属性和方法的区别

watch

案列

总结