深度监听 vue.js

最新推荐文章于 2024-07-28 19:44:27 发布

林衍丶

最新推荐文章于 2024-07-28 19:44:27 发布

阅读量178

点赞数 1

分类专栏： vue.js 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/linyan12138/article/details/120219436

版权

Vue.js 深度监听 watch 数据响应属性变化

关键词由CSDN通过智能技术生成

vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

深度监听：

基本格式： deep： true

作用:监听对象内部属性的变化。

监听属性是指用watch监听的data数据发生改变时，返回一个新值和一个旧值，而假设这个对象是b: {c: ' ' , d: ' '},这样的data对象中当b和c发生改变时，watch并不能监听到c和d的改变，所以我们将用深度监听来解决这一问题，在深度监听时，a的属性c和d发生改变时，就能触发相应的代码了。

<body>
    <div class="demo">
        <input type="text" v-model="b.m">
    </div>

    <script>
        new Vue({
            el: '.demo',
            data: {
                b: {
                    m: 'm'
                }
            },
            watch: {
                b: {
                    deep: true,
                    handler(new_m, old_m) {
                        console.log('get');
                    }
                }
            }
        })
    </script>
</body>

林衍丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深度监听 vue.js

深度监听：基本格式： deep： true 作用:监听对象内部属性的变化。监听属性是指用watch监听的data数据发生改变时，返回一个新值和一个旧值，而假设这个对象是b: {c: ' ' , d: ' '},这样的data对象中当b和c发生改变时，watch并不能监听到b和c的改变，所以我们将用深度监听来解决这一问题，在深度监听时，a的属性b和c发生改变时，就能触发相应的代码了。<body> <div...
复制链接

扫一扫

专栏目录