vue 计算属性和watch

反选 

data () {
  return { 
    msg: {a: 1},
    checks: [{check: ture}, {check: true}]
 }
},
computed: {
  checkAll: {
    get() {
       // 当取值时会执行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: {
  // 默认只会监控第一层的变化, 如果是对象类型无法获取老值
  msg:[
    handler (newValue, oldValue) {
        console.log(newValue,oldValue)
     },
    deep: true  // 增加deep:true就会在内部再去对这个对象取值
  },{
    handler() {},
    immediate: true //立即执行
  },
  'fn' 
  ]
}
// watch 的三种写法 函数 对象 字符串
// 计算属性和watch的区别 都是一个watcher 计算属性内部不会立马取值,只有取值的时候才会执行, 有缓存 如果依赖的数据不发生变化, 则不更新结果
// watch默认在内部先执行 他要先计算出一个老值来,如果数据变化就会执行
// 第一个结果 不会使用methods methods不具备缓存

你可能感兴趣的:(vue 计算属性和watch)