vue watch handler

最新推荐文章于 2025-07-24 19:56:56 发布

转载最新推荐文章于 2025-07-24 19:56:56 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c3702a46fb9a049fa0ff5f8

文章标签：

#javascript #ViewUI

本文深入探讨Vue.js中普通监听和高级监听的区别与应用。详细解析了watch选项的使用，包括如何实现深度监听对象属性变化，以及如何利用immediate选项在组件初始化时执行监听。适合希望提升Vue.js开发技能的前端开发者阅读。

普通监听

缺点：不能深度监听（对象属性的改变），刷新或首次加载不能执行。

watch: {
            carts: function (val, oldVal) {
                console.log('new: %s, old: %s', val, oldVal)
            }
        }
复制代码

高级监听

handle：watch中需要具体执行的方法。
immediate：true立即执行handle方法（首次加载、刷新、数据改变）都会执行，缺点监听不到对象属性中发生的改变。

watch: {
            carts: {
                handler(val, oldVal) {
                    console.log('new: %s, old: %s', val, oldVal)
                },
                immediate: true
            }
        },
复制代码

deep：true深度检测。例如数组对象中的某个属性改变执行handle方法。

watch: {
            carts: {
                handler(val, oldVal) {
                    console.log('new: %s, old: %s', val, oldVal)
                },
                deep: true
            }
        },
复制代码

转载于:https://juejin.im/post/5c3702a46fb9a049fa0ff5f8