vue2 中 watch 监听属性

vue2 中 watch 监听属性

1. 简介

watch 是 Vue 2 中的一个重要选项，用于定义观察者（watcher），监视指定的数据属性的变化。当被监视的属性发生变化时，相应的处理函数会被调用，从而允许你对变化做出反应。这在需要根据数据变化执行异步操作或开销较大的计算时非常有用。

2. 基本语法

watch 的基本语法如下:
如果监听的需求比较简单，可以直接使用函数式写法：

1. 函数式写法

export default {
   
	data() {
   
		return {
   
			message: 'Hello, Vue!'
		}
	},
	watch: {
   
		// 定义一个 watcher 来监视 message 属性
		message (newValue, oldValue) {
   
			console.log(`message changed from ${
     oldVal} to ${
     newValue}`)
		}
	}
}

在这个例子中，每当 message 的值发生变化时，watch 选项中的处理函数就会被触发，并接收新旧两个值作为参数。这种方式写起来简便，适用于简单的监听需求

2. 对象式写法

如果监听需求比较复杂，建议使用对象式写法：、

export default {
   
  data() {
   
    return {
   
      dataProperty: ''
    };
  },
  watch: {
   
    dataProperty: {
   
      handler(newVal, oldVal) {
   
        console.log(`数据从 ${
     oldVal} 变更为 ${
     newVal}`);
      },
      deep: true,
      immediate: true
    }
  }
};

这种方式更清晰，更方便拓展和维护，适用于复杂的监听需求

3. 示例

1. 基础用法

假设我们有一个简单的输入框，希望在用户输入内容后立即更新某个状态：

<template>
  <div id="app">
    <input v-model="searchText" placeholder="Search...">
    <p>Searching for: {
   {
    searchText }}</p>
  </div>
</template>

<script>
export default {
   
  data() {
   
    return {
   
      searchText: ''
    };
  },
  watch: {
   
    searchText(newValue) {
   
      console.log('Search text changed:', newValue);
      this.performSearch(newValue);
    }
  },
  methods: {
   
    performSearch(query) {
   
      // 执行搜索逻辑...
      console.log('Performing search with query:', query);
    }
  }
};
</script>

这段代码会在每次 searchText 变化时打印新的值，并调用 performSearch 方法来执行搜索操作。

2. 深度监听对象属性

如果你需要监听的对象是嵌套的，或者是一个复杂的数据结构，默认情况下 watch 只会监听顶层属性的变化。为了监听对象内部属性的变化，可以使用 deep 选项：

export default {
   
  data() {
   
    return {
   
      user: {