watch侦听器_watch 初始化调用-优快云博客

本文链接：https://blog.youkuaiyun.com/eee66665/article/details/124706440

本文介绍了Vue.js中watch选项的使用，它提供了一种通用方法来响应数据变化，尤其适用于处理异步或复杂操作。当需要在数据变更时执行特定任务，watch选项非常有用。文章通过示例展示了如何监听和响应属性变化，包括计算属性，并解释了两种监视方法：直接使用watch和vm.$watch。示例中展示了如何监听'ishot'属性并打印新旧值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

当被监听的属性变化的时候，自动调用回调函数，进行相关操作
监视的属性必须是存在的才可以进行监视
也是可以监视计算属性的
监视的两种方法：
1:watch
2:vm.$watch

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <span>{{info}}</span>
        <button @click="change">点击切换</button>
    </div>
</body>
<!-- 使用cdn方式引入vue--对于制作原型或学习，你可以这样使用最新版本： -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    //初始化一个vue实例
    Vue.config.productionTip = false
    var vm = new Vue({
        el: "#root",
        data: {
            ishot: false
        },
        methods: {
            change() {
                this.ishot = !this.ishot
            }
        },
        computed: {
            // 计算属性的 getter
            info: function() {
                // `this` 指向 vm 实例
                return this.ishot ? '炎热' : '凉爽'
            }
        },
        watch: {
            ishot: function(newvalue, oldvalue) {
                console.log(newvalue, oldvalue)
            }
        }

    })
</script>
</html>