watch与computed的区别

vue的watch细节

watch的常用方法

watch: {
   isStatus(newValue,oldValue){
      console.log('新',newValue,'旧',oldValue)
   }
}

当第一次赋值时就调用，需要使用immediate，回调函数为handler

watch: {
   isStatus: {
      immediate: true,
      handler(newValue,oldValue){
            console.log('新',newValue,'旧',oldValue)
      }
   }
}

当需要监听对象内部变化的时候，需要使用deep

watch: {
   isStatus: {
      deep: true,
      handler(newValue,oldValue){
            console.log('新',newValue,'旧',oldValue)
      }
   }
}

vue计算属性computed

computed是计算属性，它依赖计算属性设置的属性值，computed的值会被缓存，只有属性值变化了computed才会再次调用并计算它们。
computed不能异步操作，因为计算属性是通过return返回值传递参数，异步操作的时候return是没有意义的。

// 错误的
  computed: {
    getLevel() {
      return setTimeout(()=>{ return this.fiLevel + 10 },1000);
    },
  },
// 此时返回的是setTimeout的id

// 错误的
computed: {
    getLevel() {
      setTimeout(()=>{ return this.fiLevel + 10 },1000);
      return this.fiLevel
    },
  },
// 这里返回的是 this.fiLevel = 1

computed可以设置多个依赖属性，并对其监听，如果依赖的值发生变化了，computed则会调用计算，并返回计算后的值。当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算。例如：

// 计算a + b 的总和，如果a\b变化则计算属性自动触发，可以想象成计算器效果
const total = computed(() => {
  return a.value + b.value
})

// 根据依赖值计算
const total = computed(() => {
  a.value = props.check(a.value, 1, 30);
  b.value = props.check(b.value, a.value + 1, 30);
  return `${a.value}-${b.value}`
})

当我们需要监听某值的变化来执行异步操作或调用函数时，应该使用watch.
当我们需要依赖设置的属性值来执行监听并自动计算时，应该使用computed.

监听isShow的变化，完整写法，利用get获取，set设置数值变化，可用于组件弹窗

// 完整写法
computed: {
  getShow: {
    set(newV){
      this.$emit('closeDialog',newV)
    },
    get (){
      return this.isShow;
    }
  },
},

设置更新计算属性的值，计算属性可以看成是一个变量，当你修改计算属性的值，会触发内部set函数

// 1. 需要用到set函数:
computed {
    objArr: {
        get() { return this.options;},
        set(newValue) {
            console.log('newValue', newValue)
            this.options.push(newValue);
        }
    }
}

// 2. 触发set函数 即给objArr赋值:
// 这里我们封装个方法:
methods: {
    setObjArr() {
        this.objArr = {b: 2}
    }
}
// 通过按钮点击触发
<button @click="setObjArr">set</button>