vue-java-tutorials/vue2-tutorials/import-script/9-监视属性.md

Vue2 监视属性（Watch）详解文档

一、基本概念

监视属性（Watch）是 Vue2 中用于观察和响应数据变化的机制。它允许你在数据变化时执行异步操作或更复杂的逻辑。

二、代码示例解析

<div id="app">
    <h2>天气很什么：{{isHot ? '炎热' : '凉爽'}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            isHot: true
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            isHot: {
                immediate: true,  // 立即执行handler
                handler(newVal, oldVal) {
                    console.log("天气状态修改", newVal, oldVal);
                }
            }
        }
    });
</script>

三、核心特性

1. 基本语法结构

watch: {
    要监视的属性: {
        handler(newValue, oldValue) {
            // 响应变化
        },
        immediate: false,  // 是否立即执行
        deep: false       // 是否深度监视
    }
}

2. 简写形式（不需要配置项时）

watch: {
    isHot(newVal, oldVal) {
        console.log("天气变化", newVal, oldVal);
    }
}

3. 深度监视（deep watch）

通常监视对象属性。

watch: {
    someObject: {
        handler(newVal) {
            console.log("对象内部变化", newVal);
        },
        deep: true  // 深度监视对象内部值变化
    }
}

四、配置选项说明

选项	类型	默认值	说明
handler	Function	必填	数据变化时的回调函数
immediate	Boolean	false	是否立即以当前值执行handler
deep	Boolean	false	是否深度观察对象内部值的变化

五、最佳实践

1. 命名规范：

   • 监视属性通常以 watch 开头命名方法（如 watchIsHotChange）
   • 或者直接使用被监视的属性名

2. 使用场景：

   • 数据变化需要执行异步操作时
   • 数据变化需要执行开销较大的操作时
   • 需要观察嵌套数据结构变化时

3. 性能考虑：

   • 避免在handler中执行复杂同步操作
   • 对于大对象，谨慎使用deep watch

六、高级用法

1. 监视计算属性

computed: {
    weatherDesc() {
        return this.isHot ? "炎热" : "凉爽";
    }
},
watch: {
    weatherDesc(newVal) {
        console.log("天气描述变化:", newVal);
    }
}

2. 监视路由变化

watch: {
    '$route'(to, from) {
        console.log("路由变化", to.path, from.path);
    }
}

3. 多属性监视

watch: {
    // 监视多个属性
    'a.b.c': function(newVal) {
        // 当a.b.c变化时执行
    },
    'x.y': 'someMethod'  // 直接调用methods中的方法
}

七、与计算属性的比较

特性	计算属性	监视属性
目的	派生新数据	响应数据变化
缓存	有缓存	无缓存
异步	不支持	支持
返回值	必须返回	不需要返回
复杂度	适合简单计算	适合复杂逻辑

八、常见问题

1. 为什么handler没有被调用？

   • 检查监视的属性名拼写是否正确
   • 确认属性值确实发生了变化（对于对象/数组，可能需要深度监视）

2. 什么时候使用deep watch？

   • 当需要检测对象内部属性变化时
   • 注意性能影响，必要时可以指定具体路径如 'obj.prop'

3. 如何取消监视？

   • 使用 vm.$watch() 返回的取消函数：

     const unwatch = this.$watch('someProp', handler);
     unwatch();  // 取消监视