vue中的watch

阅读优秀的文章
详解Vue中的computed和watch
vue中computed、watch、methods与生命周期的执行顺序

Vue中的watch又名为侦听属性，它主要用于侦听数据的变化，在数据发生变化的时候执行一些操作。

Vue官网很明确的建议我们这样使用watch侦听属性：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch的用法

直接写一个监听处理函数，当每次监听到cityName值发生改变时，执行函数。

<template>
  <div id="app">
    <p>计数器：{{counter}}</p>
    <el-button type="primary" @click="counter++">
      Click
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      counter: 0
    }
  },
  watch: {
    /**
     * @name: counter
     * @description: 
     *   监听Vue data中的counter数据
     *   当counter发生变化时会执行对应的侦听函数
     * @param {*} newValue counter的新值
     * @param {*} oldValue counter的旧值
     * @return {*} None
     */
    counter(newValue, oldValue){
      if(this.counter == 10){
        this.counter = 0;
      }
    }
  }
}
</script>

handler

那上面的这种写法等同于给counter提供一个handler函数：

watch: {
  counter: {
    handler(newValue, oldValue){
      if(this.counter == 10){
        this.counter = 0;
      }
    }
  }
}

immediate

正常情况下，侦听属性提供的函数是不会立即执行的，只有在对应的vue data发生变化时，侦听属性对应的函数才会执行。
那如果我们需要侦听属性对应的函数立即执行一次，就可以给侦听属性提供一个immediate选项，并设置其值为true。

使用场景：
比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来得默认值时，也需要执行函数，此时就需要将immediate设为true。

immediate:true 会导致一个问题
immediate会让watch执行顺序提升至created之前，这个可是坑点，如果你在immediate中修改了初始data值，就会导致created获取的值是修改过的值，导致一些人瞬间懵逼。

watch: {
  counter: {
    handler(newValue, oldValue){
      if(this.counter == 10){
        this.counter = 0;
      }
    },
    immediate: true
  }
}

deep

如果我们对一个对象类型的vue data进行侦听，当这个对象内的属性发生变化时，默认是不会触发侦听函数的

<template>
  <div id="app">
    <p><el-input v-model="person.name" placeholder="请输入姓名"></el-input></p>
    <p><el-input v-model="person.age" placeholder="请输入年龄"></el-input></p>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      person: {
        name: 'jack',
        age: 20
      }
    }
  },
  watch: {
    person: function(newValue){
      console.log(newValue.name + ' ' + newValue.age);
    }
  }
}
</script>

注意问题

在watch中不要使用箭头函数，即不应该使用箭头函数来定义 watcher 函数 , 因为箭头函数中的this是指向当前作用域。
对于箭头函数来说，箭头函数中的 this 指向的是定义时的对象而不是函数运行时所在的对象，即全局定义时的windows对象。

--记录问题

我在父组件定义了一个对象空对象，请求后给对象赋值

sourceParamsObj: {}  // data里定义了空的对象
this.sourceParamsObj.fileId = 1

然后props到子组件后，通过watch监听sourceParamsObj对象，deep为true也一直监听不到。
后来发现是因为sourceParamsObj定义了空对象，要在初始值时就给对象属性

sourceParamsObj: { fileId: '' }

这样就能监听到了。

关于这个问题的解释：https://blog.csdn.net/qq_41221596/article/details/128505767