本文共 672 字，大约阅读时间需要 2 分钟。

Vue.js 数据监听优化指南

1. 基础版监听：单个值监控

在实际项目中，常需要监听单个值的变化。以下是一个典型的年龄验证场景：

使用场景：用户在输入框输入年龄，系统根据不同年龄范围显示相应提示信息。

实现代码：

   
        年龄：    
        
    
    提示信息：    
    { { infoMsg } }
   

注意事项：

• watch 中的 age 方法第一个参数 val 为最新值，oldval 为变更前的值。
• 方法内 this 指向为 vm，可直接引用数据和方法。

2. 进阶版监听：对象属性监控

在实际应用中，单独监听对象的单个属性变化会导致资源浪费。我们需要使用深度监听技术。

实现代码：

   
        年龄：    
        
    
    提示信息：    
    { { infoMsg4 } }
   

优化建议：

• handler 方法不能使用箭头函数，否则 this 会指向全局对象。
• deep: true 启用深度监听，确保对象内部属性变更也能触发监听。

3. 高级版监听：对象属性专用监控

在第二种实现中，我们直接监听对象的属性变更，存在性能开销。可以通过计算属性优化监听逻辑。

实现代码：

   
        年龄：    
        
    
    提示信息：    
    { { infoMsg5 } }
   

优化效果：

• 通过创建 ageval 计算属性，仅监听对象中 age5 的变更，减少不必要的监听。
• 性能提升显著，特别是数据量大或对象复杂度高的场景。

转载地址：http://szss.baihongyu.com/