第十五节——观察者watch

一、概念

在Vue中，watch是一个用于监听数据变化的功能。它可以监听一个或多个数据，并在数据发生变化时执行相应的操作。当我们需要在数据变化时执行异步操作、计算属性或执行一些副作用时，watch就派上了用场啦。注意。watch默认只能进行浅层次监听，如果数据非常复杂，则需要进行深度监听

二、基本使用

观察num变化，每次变化都会触发hello

<template>
  <div>
    {{ num }}
    <button @click="num+=1">+1</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num: 1
    }
  },

  watch: {
    /**
     * 在watch中，要观察那个属性就直接把对应属性定义乘方法
     * 
     * 接收两个参数
     * newVal 更新后的值
     * oldVal 更新前的值
     */
    num (newVal, oldVal) {
      console.log(newVal, oldVal, '哈喽')
    }
  }
}

</script>

三、immediate 立即触发

立即触发监听 默认情况下，watch在初始化时不会立即执行。如果我们希望在初始数据加载后立即触发监听，可以使用immediate选项

<template>
  <div>
    {{ num }}
    <button @click="num+=1">+1</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num: 1
    }
  },

  watch: {
    /**
     * 把要观察的属性写成一个对象
     * 每次改变 都会触发 handler 方法 注意：只能叫handler
     * immediate 立即执行
     */
    num: {
      handler (newVal, oldVal) {
        console.log(newVal, oldVal, '哈喽')
      },
      immediate: true
    }
  }
}

</script>

四、深度监听

<template>
  <div>
    <!-- {{ num }} -->
    <!-- <button @click="num += 1">+1</button> -->
    <button @click="update">改变</button>
    {{ arr }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [{ name: "张三", child: [{ name: "张三儿子" }] }],
    };
  },

  watch: {
    arr: {
      handler () {
        console.log("改变了吗")
      },
      deep: true
    }
  },

  methods: {
    update () {
      this.arr[0].child[0].name = '李四'
    }
  }
};
</script>

五、注意

1、避免过度使用Watch

Watch功能非常强大，但过度使用可能会导致代码变得难以理解和维护。在编写代码时，应仅在必要时使用watch，并尽量使用计算属性或方法来处理简单的数据变化。

2、避免在Watch中进行异步操作

虽然watch允许执行异步操作，但要谨慎使用。因为watch是在数据变化时被调用的，频繁的异步操作可能导致性能问题或引发意外的行为。如果需要进行异步操作，最好使用Vue提供的异步方法（如this.$nextTick或this.$emit）来触发操作。

3、避免无限循环

当在watch中修改被监听的数据时，可能会导致无限循环的问题。

4、使用深度监听时的性能影响

使用deep选项来深度监听对象或数组的变化时，需要注意性能问题。深度监听会递归遍历所有属性或元素，因此在大型数据结构上使用时可能会影响性能。如果可能的话，可以针对具体的属性进行监听，而不是整个对象或数组。

5、Watch与计算属性的选择

在某些情况下，watch和计算属性可以达到相同的效果。如果需要在数据变化时执行异步操作或有副作用时，应使用watch。而如果仅需要根据数据进行简单的变换和计算，则更适合使用计算属性