1、watch钩子函数监听数据的变化

watch 的一个特点是，最初绑定的时候是不会执行的（firstName的值在data定义时赋予的值），要等到 firstName 改变时才执行监听计算。入下方的写法：

 data() {
    return {
     
      firstName: "Dawei",
      lastName: "Lou",
      fullName: "",
    };
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + " " + this.lastName;
    },
  },

上方代码的效果，因为在data中定义了fullName为空，所以页面首次初始化的时候是没有fullName值得，需要触发firstName之后，fullName才会渲染出对应的数据

只用在监听的firstName值发生变化的时候，this.fullName才会一同变化。但是。。。。往下看

handler方法和immediate属性
这两个属性，会是watch初此就执行，

watch: {
    // firstName(newName, oldName) {
    //   this.fullName = newName + " " + this.lastName;
    // },
    firstName: {
      handler(newName, oldName) {
        this.fullName = newName + " " + this.lastName;
      },

      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true,
    },
  },
 

注意：

在watch中，如果对对象进行监听，只有对象obj被重新赋值时，watch才会被监听到，这个时候无法对obj里面的属性的变化进行监听，这时候，我们可以只对这个属性监听，可以是使用字符串形式监听

watch: {
 'obj.a': {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true,
  // deep: true
 }
}

应用场景：

可以只用watch来监听数据的变化实时更新数据的变化

<template>
 <input v-model="value" /> // 搜索框
</template>
<script>
export default {
 data(){
  return {
    value: '' // 值
  }
 },
 watch:{
   value(val){ // 实时监听数据变化
     this.wat_fun(val)
   }
 }， 
 methods:{
   wat_fun(val){ // 这里可以调用搜索api接口
    console.log(val)
   }
 }
}
</script>

watch和computed各自处理的数据关系场景不同
知识点1：watch擅长处理的场景：一个数据影响多个数据
知识点2：computed擅长处理的场景：一个数据受多个数据影响

原文：https://www.jianshu.com/p/050d17ee69fb