vue中的watch和computed

官方文档

watch的用法

watch大多数来监听一个值，来进行操作

Vue通过watch 来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方法时最有用的。（异步操作开销巨大的操作，比如远程服务器获取搜索列表）

computed的用法（更常用）

什么是计算属性

计算属性的重点突出在属性两个字上。它是一个能将计算结果缓存起来的属性

computed反过来通过多个值改变这个值

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性。当你有一些数据需要随着其他数据变动而变动时。

computed的用法比较广，能实现先考虑computed
computed是监听多个值来改变一个值，而watch是一个值影响一个值
computed具有缓存性

在vue中，使⽤watch来响应数据的变化。watch的⽤法⼤致有三种。下⾯代码是watch的⼀种简单的⽤法：

<input type="text" v-model="cityName"/>
new Vue({
  el: '#root',
  data: {
    cityName: 'shanghai'
  },
  watch: {
    cityName(newName, oldName) {
// ...
    }
  } 
})

直接写⼀个监听处理函数，当每次监听到 cityName 值发⽣改变时，执⾏函数。也可以在所监听的数据后⾯直接加字符串形式的⽅法名

watch: {
    cityName: 'nameChange'
    }
 }

deep

当需要监听⼀个对象的改变时，普通的watch⽅法⽆法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进⾏深度监听

<input type="text" v-model="cityName.name"/>
  
new Vue({
  el: '#root',
  data: {
    cityName: {id: 1, name: 'shanghai'}
  },
  watch: {
    cityName: {
      handler(newName, oldName) {
// ...
    },
    deep: true,
    immediate: true
    }
  } 
})

alt