侦听属性的简写形式

right前端

已于 2022-05-11 21:26:16 修改

阅读量102

点赞数

文章标签： Vue $watch 监听数据绑定实时更新

于 2022-05-11 21:23:44 首次发布

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

版权

本文介绍了如何在Vue中使用$watch简写形式监听数据变化，通过实例演示了如何监听'a'和number对象的属性，并在属性值改变时执行相应操作。

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

如果监听普通的变量话直接就可以吧监听的属性写一个函数的形式

<!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>
        <button @click="a++">a++</button>
        <span>{{a}}</span>
        <button @click="number.g++">number.g++</button>
        <span>{{number.g}}</span>
    </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,
            a: 1,
            number: {
                d: 22,
                g: 88
            }
        },
        methods: {
            change() {
                this.ishot = !this.ishot
            }
        },
        computed: {
            // 计算属性的 getter
            info: function() {
                // `this` 指向 vm 实例
                return this.ishot ? '炎热' : '凉爽'
            }
        },
        watch: {
            //直接写成一个函数
            a: function(newVal, oldVal) {
                console.log(newVal, oldVal);
            },

        }
    })
</script>
</html>

使用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>
        <button @click="a++">a++</button>
        <span>{{a}}</span>
        <button @click="number.g++">number.g++</button>
        <span>{{number.g}}</span>
    </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,
            a: 1,
            number: {
                d: 22,
                g: 88
            }
        },
        methods: {
            change() {
                this.ishot = !this.ishot
            }
        },
        computed: {
            // 计算属性的 getter
            info: function() {
                // `this` 指向 vm 实例
                return this.ishot ? '炎热' : '凉爽'
            }
        },
        // watch: {
        //     a: function(newVal, oldVal) {
        //         console.log(newVal, oldVal);
        //     },
        //     deep: true
        // }
    })
    vm.$watch('a', function(newVal, oldVal) {
        // 做点什么
        console.log(newVal, oldVal);
    })
</script>
</html>