使用watch进行深度监听

right前端

已于 2022-05-11 17:09:00 修改

阅读量9k

点赞数

文章标签： vue.js javascript 前端

于 2022-05-11 17:03:50 首次发布

本文链接：https://blog.csdn.net/eee66665/article/details/124714161

版权

本文探讨了Vue.js中如何监听普通变量和对象的深度变化。通过示例代码展示了如何设置监听器以捕获数据变化，特别是在对象内部值改变时，使用`deep:true`实现深度监听。总结指出，Vue的watch对象默认不监听对象内部值，但可以通过配置进行深度监听。

摘要由CSDN通过智能技术生成

普通的变量的监听

<!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>

对象的监听--深度监听

<!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: {
            number: {
                handler: function(newVal, oldVal) {
                    console.log(newVal, oldVal);
                },
                deep: true
            }
        }
    })
    // vm.$watch('number', function(newVal, oldVal) {
    //     // 做点什么
    //     console.log(newVal, oldVal);
    // }, {
    //     deep: true,
    //     immediate: true
    // })
</script>
</html>

总结：深度监听
1：vue中的watch对象是默认不监听内部的值得变化的
2：配置了 deep:true是可以监听内部的值变化
vue自身默认是可以监听对象内部的值变化，但是watch是不可以的
使用watc的时候根据数据的具体结构，来决定是否采用深度监听

right前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用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"> <t
复制链接

扫一扫