# computed和watch的区别和应用场景

# 含义及区别:

computed:是计算属性,依赖其它属性值,并且computed的值有缓存,只有它以来的属性值发生改变,computed的值才会重新计算,渲染.
watch:是侦查器属性,更多的是「观察」的作用,类似于某些数据的监听回调,每当坚挺的数据变化时都会执行回调进行后续操作:

运用场景:

  • 当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用computed的缓存特性,避免每次获取值时,重新计算浪费性能。
  • 当我们需要在数据变化时执行异步或开销比较打的操作时,应该使用watch,使用watch选项允许我们执行异步操作(访问一个API), 限制我们执行该操作的频率 ,并且在我们得到最终结果前,设置中间状态,这些都是计算属性无法做到的。

# computed实现一个全选双向控制的demo

例如:

全选反选 <input type="checkbox" v-model="checkAll">

<input type="checkbox" v-for="check in checks" v-model="check. check">

let vm = new Vue({
  el: ''#app, 
  data(){

    return {
      checks:[{check:true},{check:true},{check:true}]
    }

  }, 
  computed: {

    checkAll: {
      get() {
        // every 有一项是false 就停止查找返回false
        return this.checks.every(item => item.check)
      },
      set(newValue){ // 计算属性很少用set方法,一般只有使用v-model计算属性才会添加set方法
        this.checks.forEach(item => {
          item.check = newValue
        })
      }
    }

  }
})

# watch的应用场景

let vm = new Vue({
  el: ''#app, 
  data(){

    return {
      msg:{a:1},
    }

  }, 
  watch: {

    // 监控msg对象
    msg:[
      
    ]

  }
})