前端vue监听 -watch

前端vue监听 -watch

• • 前言
  • 基本用法
  • • 监听简单数据属性
    • 监听对象属性
    • 高级用法
    • • 深度监听对象
      • 即时触发监听
      • 监听计算属性
      • 注意事项

        前言

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

        基本用法

        监听简单数据属性

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

          
        
            
            
        当前输入内容：{{ message }}
          
        
        
        export default {
          data() {
            return {
              message: ''
            };
          },
          watch: {
            message(newValue, oldValue) {
              console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
            }
          }
        };
        
        

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

        监听对象属性

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

          
        
            
            
        当前姓名：{{ user.name }}
          
        
        
        export default {
          data() {
            return {
              user: {
                name: ''
              }
            };
          },
          watch: {
            'user.name'(newValue, oldValue) {
              console.log(`新姓名: ${newValue}, 旧姓名: ${oldValue}`);
            }
          }
        };
        
        

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

        高级用法

        深度监听对象

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

          
        
            
            
            
        当前姓名：{{ user.name }}, 当前年龄：{{ user.age }}
          
        
        
        export default {
          data() {
            return {
              user: {
                name: '',
                age: ''
              }
            };
          },
          watch: {
            user: {
              handler(newValue, oldValue) {
                console.log('用户信息已更新');
              },
              deep: true
            }
          }
        };
        
        

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

        即时触发监听

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

          
        
            
            
        当前输入内容：{{ message }}
          
        
        
        export default {
          data() {
            return {
              message: ''
            };
          },
          watch: {
            message: {
              handler(newValue, oldValue) {
                console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
              },
              immediate: true
            }
          }
        };
        
        

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

        监听计算属性

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

          
        
            
            
            
        全名：{{ fullName }}
        （图片来源网络，侵删）
          
        
        
        export default {
          data() {
            return {
              firstName: '',
              lastName: ''
            };
          },
          computed: {
            fullName() {
              return `${this.firstName} ${this.lastName}`;
            }
          },
          watch: {
            fullName(newValue, oldValue) {
              console.log(`新全名: ${newValue}, 旧全名: ${oldValue}`);
            }
          }
        };
        
        

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

        注意事项

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

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

        
        （图片来源网络，侵删）
        
        （图片来源网络，侵删）