Vue计算属性computed和监视属性watch

计算属性computed和监视属性watch

1 计算属性computed基本应用

1.1 完整写法

  computed: {    chekedTotle: {      get() { return  //值      },      set(value) { //逻辑      },    },  }

• chekedTotle为计算属性的名字,不能与data中的值重名
• get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值,get中必须要有return
• set回调函数:监视当前属性值发生改变时调用,更新相关的属性值,也可以添加新的逻辑

1.2 简写

sum1() {      //  计算规则      }      });      return  //  返回值    },

配置成函数形式，只有用到get时才可以简写

2 监视属性watch的基本应用

2.1 完整写法

watch: {    todos: {    //开启深度监视      deep: true,      //初始化就执行一次      immediate:true,      handler(value) {      //具体逻辑代码 localStorage.setItem("todos", JSON.stringify(value));      },    },  },

2.2 简单写法

watch: {    todos（value）{ //具体逻辑代码 localStorage.setItem("todos", JSON.stringify(value));    },  },

2.3 第三种写法

vm.$watch('isHot',{immediate:true, //初始化时让handler调用一下//handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}})

2.4 总结

1. 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2. 监视的属性必须存在，才能进行监视！！
3. 配置deep:true可以监测对象内部值改变（多层），默认不监测对象内部值的改变。

3. watch和computed用法区别

watch支持异步操作，computed不支持

watch:{firstName(val){setTimeout(()=>{console.log(this)this.fullName = val + '-' + this.lastName},1000);},}

如上代码，watch可以延时加载，而computed不可以。采用哪种方式，看具体业务需求，大部分是可以通用的。