computed和watch的详细区别

从作用机制上：
   methods，watch 和 computed 都是以函数为基础的，但各自却都不同
   watch 和 computed 都是以 Vue 的依赖追踪机制为基础的，当某一个数据发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动
   对 methods：methods 里面是用来定义函数的，它需要手动调用才能执行。而不像 watch 和 computed 那样，“自动执行”预先定义的函数，相比于 watch / computed，methods 不处理数据逻辑关系，只提供可调用的函数
从性质上：
   methods 里面定义的是函数，仍然需要去调用它。
   computed 是计算属性，事实上和 data 对象里的数据属性是同一类的（使用上）。
   watch：类似于监听机制+事件机制
   watch 和 computed  区别
功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
    是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
    是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return
   watch擅长处理的场景：一个数据影响多个数据 -------搜索框。
   computed擅长处理的场景：一个数据受多个数据影响 -- 使用场景：当一个值受多个属性影响的时候--------购物车商品结算
   watch：属性监听
   watch中的函数名称必须要和data中的属性名一致，因为watch是依赖data中的属性，当data中的属性发生改变的时候，watch中的函数就会执行。
   watch中的函数有两个参数，前者是newVal，后者是oldVal。
   watch中的函数是不需要调用的。
   watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型数据的变化，需要进行深度监听。"obj.name"(){}------如果obj的属性太多，这种方法的效率很低，obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。
特殊情况下，watch无法监听到数组的变化，特殊情况就是说更改数组中的数据时，数组已经更改，但是视图没有更新。更改数组必须要用splice()或者$set。this.arr.splice(0,1,100)-----修改arr中第0项开始的1个数据为100，this.$set(this.arr,0,100)-----修改arr第0项值为100。
immediate:true    页面首次加载的时候做一次监听。
一个数据影响多个数据  ---  应用场景：搜索框、表单输入、异步更新、动画 
　　

computed：计算属性
   据依赖关系进行缓存的计算，并且只在需要的时候进行更新。
   一个计算属性里面可以完成各种复杂的逻辑，最终返回一个结果；计算属性可以依赖多个vue实例的数据，只要其中一个任何一个数据发生变化，计算属性就会重新执行，视图也会更新。除此之外，计算属性还可以依赖其他计算属性和其他实例的数据
   一个数据受多个数据影响 ----  购物车结算 受到单价 数量 还有是否被选中的影响
模板字符串拼接
import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    <div>
      <span>Name: {{firstName + ' ' + lastName}}</span>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou'
  }
})
使用 computed
new Vue({
  el: '#root',
  template: `
    <div>
      <span>Name: {{name}}</span>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou'
  },
  computed: {
    name () {
      return `${this.firstName} ${this.lastName}`
    }
  }
})
使用 methods （ 结果和 computed 的一样 ）
new Vue({
  el: '#root',
  template: `
    <div>
      <span>Name: {{name}}</span>
      <span>Name: {{getName()}}</span>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou'
  },
  computed: {
    name () {
      return `${this.firstName} ${this.lastName}`
    }
  },
  methods: {
    getName () {
      return `${this.firstName} ${this.lastName}`
    }
  }
})
使用 computed 的好处：提高性能
当我们改变 number 时，整个应用会重新渲染，vue 会被数据重新渲染到 dom 中。

这时，如果我们使用 methods 方法，随着渲染，方法需要被重新调用。

而 computed 中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取，从而性能开销比较小。当新的值需要大量计算才能得到，缓存的意义就非常大。

如果 computed 所依赖的数据发生改变时，计算属性才会重新计算，并进行缓存；当改变其他数据时，computed 属性 并不会重新计算，从而提升性能。

当我们拿到的值需要进行一定处理使用时，就可以使用 computed。

watch
监听 firstName 数据，并根据改变得到的新值，进行某些操作

new Vue({
  template: `
    <div>
      <p>FullName: {{fullName}}</p>
      <p>FirsName: <input type="text" v-model="firstName"/></p>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou',
    fullName: ' '
  },
  watch: {
    firstName (newName, oldName) {
      this.fullName = newName + ' ' + this.lastName
    }
  }
})
注意：

初始 fullName 是没有值的，只有当数据改变时，才会显示。因为watch 的方法默认是不会执行的，只有当监听数据变化，才会执行
不要在 computed 或 watch 中，去修改所依赖的数据的值，尤其是 computed；如果这样做，可能导致一个无线循环的触发