Vue watch 与 computed

一、watch

vue 的功能属性 ：
 watch：监听数据的变化，

• 主要监听：
  • data 数据
  • props 数据
  • 路由

 data 数据：

data() {
    return {
      b: 120,
      obj:{
        c:99,
        d: 100,
      },
      state: "",
    };
  },


watch:{
	//简单属性
	num(newValue,olbValue){
	},
	// 复杂属性
	'obj.c'(newValue){
        console.log(newValue);
    }
	// 深度监听，在页面初始化时就开始监听
    "obj.d": {
      handler(newVal) {
        console.log(newVal);
        this.state = (newVal > 50) ? "大于50" : "小于50";
      },
      immediate: true,
    },
}

二、computed

computed：计算属性
 对数据的 计算 和 缓存

computed:{
    reverseStr(){
      return this.str.split("").reverse().join("");
    },
  }
  

• 我们看到，computed 与 methods属性的编写格式差不多，但也有区别：
  • computed 必须有 return 值；
  • 使用computed 时，直接引用属性，methods 是函数调用的形式；
  • computed 使用时 有缓存