前端vue监听 -watch

前言

在 Vue.js 里，watch 选项可用于响应式地监听数据的变化，当被监听的数据发生改变时，就会触发相应的回调函数来执行特定操作。下面从基本用法、高级用法以及注意事项等方面详细讲解 watch。

基本用法

监听简单数据属性

监听一个简单的数据属性时，在 watch 对象中使用与数据属性同名的键，对应的值为一个回调函数。该 回调函数接收两个参数 ：新值和旧值。

<template>
  <div>
    <input v-model="message" placeholder="请输入内容">
    <p>当前输入内容：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
    }
  }
};
</script>

在这个例子中，每当 message 的值改变时，回调函数就会被触发，同时会在控制台打印出新值和旧值。

监听对象属性

如果要监听对象的某个属性，可使用字符串形式的路径来指定要监听的属性。

<template>
  <div>
    <input v-model="user.name" placeholder="请输入姓名">
    <p>当前姓名：{{ user.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: ''
      }
    };
  },
  watch: {
    'user.name'(newValue, oldValue) {
      console.log(`新姓名: ${newValue}, 旧姓名: ${oldValue}`);
    }
  }
};
</script>

这里监听了 user 对象的 name 属性，当 name 改变时，会在控制台输出相应信息。

高级用法

深度监听对象

若要监听对象内部所有属性的变化，需使用深度监听，通过设置 deep: true 来实现。

<template>
  <div>
    <input v-model="user.name" placeholder="请输入姓名">
    <input v-model="user.age" placeholder="请输入年龄">
    <p>当前姓名：{{ user.name }}, 当前年龄：{{ user.age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        age: ''
      }
    };
  },
  watch: {
    user: {
      handler(newValue, oldValue) {
        console.log('用户信息已更新');
      },
      deep: true
    }
  }
};
</script>

只要 user 对象的任何属性发生变化，handler 函数就会被触发。不过要注意，深度监听会遍历对象的所有属性，可能会对性能产生一定影响。

即时触发监听

有时希望 在组件挂载时就立即触发一次监听函数，可使用 immediate: true 选项。

<template>
  <div>
    <input v-model="message" placeholder="请输入内容">
    <p>当前输入内容：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message: {
      handler(newValue, oldValue) {
        console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
      },
      immediate: true
    }
  }
};
</script>

在这个例子中，组件挂载时就会执行一次 handler 函数。

监听计算属性

除了监听数据属性，还能监听计算属性。当计算属性依赖的数据发生变化，导致计算属性的值改变时，监听函数会被触发。

<template>
  <div>
    <input v-model="firstName" placeholder="请输入名字">
    <input v-model="lastName" placeholder="请输入姓氏">
    <p>全名：{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  },
  watch: {
    fullName(newValue, oldValue) {
      console.log(`新全名: ${newValue}, 旧全名: ${oldValue}`);
    }
  }
};
</script>

当 firstName 或者 lastName 发生变化，fullName 也会改变，此时监听函数会被触发。

注意事项

1. 性能影响：深度监听会递归遍历对象的所有属性，当对象结构复杂时，可能会对性能造成较大影响。所以在使用深度监听时，要谨慎考虑。
2. 旧值问题：在深度监听对象时，oldValue 和 newValue 可能指向同一个对象，因为它们都是对象的引用。如果需要对比对象的前后状态，可以在 handler 函数中进行深拷贝。
3. 销毁监听：在组件销毁时，Vue 会自动销毁 watch 监听。但如果使用了 $watch 方法手动创建监听，需要在组件销毁前手动调用 unwatch 函数来销毁监听，避免内存泄漏。

综上所述，watch 是 Vue.js 中一个非常实用的特性，合理使用它可以方便地处理数据变化时的逻辑。