vue的watch与computed

vue3已经去掉了filters，推荐用computed或者methods去替换它

computed 根据data里面属性计算得来的属性

• computed内有异步操作时无法监听数据变化
• computed中每个属性都可以设置set与get。
• 函数默认会走get方法，函数的返回值就是属性的属性值，必须return。数据变化调用set方法。
• 有缓存性
• 不要在computed里赋值data里面的值，会死循环。
• 一/多个数据影响一个computedData时使用(利用缓存性)，比如购物车，全选操作。
• 需要返回值到页面上的一般用计算属性 computed

watch data里属性监听

• watch支持异步操作
• watch监听必须是data中声明过或传递的props数据
• 不支持缓存
• 监听的函数接收里两个参数,vue2是(newData,oldData),vue3是(newV,newV)
• 一对多，一个数据发生变化，执行相应操作会影响多个数据。比如搜索框查询。
• 监听数据变化而不需要返回值的时候用侦听属性 watch
• deep深度监听，immediate立即执行

实现computed：

全选<input type="checkbox" v-model="checkAll"/>
<p v-for="(item,index) in arr" :key="index">
    <input type="checkbox" v-model="item.checkd" />
    {{ item.text }}
</p>

export default {
    computed:{
        checkAll:{
            // 可以指定返回什么内容,并监视
            set(val){
                this.arr.forEach(ele=>{
                    ele.checkd = val;
                })
            },
            get(){
                // 每一个都为true,返回true
               return this.arr.every(e=>e.checkd) 
            }
            // 可以指定被赋值时做什么事情
        }
    },
    data(){
        return {
            // checkAll:false, 这样处理的逻辑比较复杂
            arr:[
                { checkd:true,text:"水果"  },
                { checkd:true,text:"蔬菜"  },
                { checkd:false,text:"米饭"  },
            ]
        }
    }
}

实现watch：

<template>
  <div>
    <input type="text" v-model="name" />
    <input type="text" v-model="obj.name" />
    {{ obj }}
  </div>
</template>

<script>
export default {
  // 监视数据改变后做的[行为],使用数据监视
  watch: {
    // this.xx相关的属性 data()
    name: {
      handler(newV, oldV) {
        // 数据变更时,触发的函数, 参数是新值,旧值
        console.log("n数据改变了:", newV, "原值", oldV);
      },
      immediate: true // 立刻执行
    },
    obj: {
      // 监视默认是浅层的, 只对obj生效
      deep: true, // 深层, 监视对象下的属性
      handler(newV, oldV) {
        // 数据变更时,触发的函数, 参数是新值,旧值
        console.log("obj数据改变了:", newV, "原值", oldV);
      }
    },
    // 'arr[0]':{  // 复杂路径不支持
    // },
    'obj.name':{ // 简单路径支持
        handler(newV){
            console.log('obj.name数据改变了',newV)
        }
    }
  },
  data() {
    return {
      name: '肥羊',
      obj: {
        name: '肥羊obj'
      },
      arr: [{ a: 'a' }, { b: 'b'}]
    };
  }
};
</script>