Vue Watch 的用法及最佳实践

什么是 Watch？

Watch 是 Vue 中一个强大的功能，用于响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，Watch 是最有用的。

Watch 的基本用法

1. 函数式写法

最简单的 watch 写法，适用于简单的监听场景：

export default {
  watch: {
    searchText() {
      console.log('搜索文本发生变化')
    }
  }
}

2. 对象式写法

当需要更多配置选项时，可以使用对象形式：

export default {
  watch: {
    searchText: {
      handler(newValue, oldValue) {
        console.log('新值:', newValue)
        console.log('旧值:', oldValue)
      },
      immediate: true, // 组件创建时立即执行
      deep: true      // 深度监听对象的所有属性
    }
  }
}

3. 监听对象的嵌套属性

export default {
  watch: {
    'user.name': {
      handler(newValue) {
        console.log('用户名变更为:', newValue)
      }
    }
  }
}

4. 使用 $watch 方法

适用于需要动态设置监听器的场景：

export default {
  mounted() {
    this.$watch(
      'searchText',
      (newValue, oldValue) => {
        console.log('搜索文本变化:', newValue)
      },
      {
        immediate: true,
        deep: true
      }
    )
  }
}

最佳实践

1. 选择合适的写法

   • 简单监听用函数式
   • 需要配置选项用对象式
   • 动态监听用 $watch

2. 注意性能影响

   • deep: true 会深度监听对象的所有属性，可能影响性能
   • 建议只监听需要的具体属性

3. 及时清理

   • 使用 $watch 创建的监听器需要在组件销毁前清理
   • 通过 $watch 返回的函数可以停止监听

export default {
  mounted() {
    const unwatch = this.$watch('searchText', () => {
      // 监听处理
    })
    
    // 组件销毁前清理
    this.$once('hook:beforeDestroy', unwatch)
  }
}

使用场景

1. 数据变化时需要执行异步操作
2. 需要监听路由变化
3. 表单验证
4. 数据联动

通过合理使用 Watch，可以优雅地处理各种数据变化场景，提高代码的可维护性。