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不可以。采用哪种方式，看具体业务需求，大部分是可以通用的。