vue中watch的详细用法

最新推荐文章于 2024-06-04 21:30:18 发布

留着鼻涕敲代码

最新推荐文章于 2024-06-04 21:30:18 发布

阅读量882

点赞数 7

分类专栏： Vuex 文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/weixin_58515303/article/details/120872568

版权

Vuex 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

watch ：侦听器，当需要在数据变化时执行异步或开销较大的时触发。watch一般有三种用法：

1.阉割版（简写）

语法：

watch: {

侦听数据: function ( 新数据, 旧数据 ) {

----- 可以在此处进行操作 ------

}

}

代码实例：

<body>
    <div id="root">
        <h2>{{num}}</h2>
        <button @click='fn'>num++</button>
    </div>

    <script>
        Vue.config.productionTip = false//组织vue在启动是生成生产提示
        new Vue({
            el: '#root',
            data: {
                num:1
            },
            methods: {
                fn(){
                    this.num++
                }
            },
            watch:{ // 侦听器
                // 这里就是监听num的变化
                num: function( newNum, oldNum ) { // 要监听的数据
                    console.log(newNum); // 变化之前的数据 
                    console.log(oldNum); // 变化之后的数据
                }
            }
        })
    </script>
</body>

2.完整写法 handler的deep和immediate

deep： watch 本身是无法深度侦听的，当配置了 deep：true 就可以进行深度侦听。
data：{ list：{ num：1 } } ；这种情况就需要深度监听才能监听到num的变化
immediate： watch 有一个特点在第一次绑定时是不会触发侦听器的，设置 immediate：true 时就可以一绑定就触发侦听器

语法：

watch: {

侦听数据 : {

handler: function( 旧数据，新数据 ){

                 ----- 可以在此处进行操作 ------

        }，

        deep: true, // 深度侦听

        immediate: true // 执行触发一次

}

}

<body>
    <div id="root">
        <h2>{{list.num}}</h2>
        <button @click='fn'>num++</button>
    </div>
    <script>
        Vue.config.productionTip = false//组织vue在启动是生成生产提示
        new Vue({
            el: '#root',
            data: {
                list:{
                    num:0
                }
            },
            methods: {
                fn(){
                    this.list.num++
                }
            },
            watch:{ // 侦听器
                // 注意：这里整听 "list.num" 需要打引号 
                "list.num":{ // 要监听的数据
                    // handler:侦听器的完整写法
                    handler:function(newNum,oldNum){
                        console.log(newNum); // 新数据
                        console.log(oldNum); // 旧数据
                    }
                }
            }
        })
    </script>
</body>

留着鼻涕敲代码

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
vue中watch的详细用法

watch ：侦听器，当需要在数据变化时执行异步或开销较大的时触发。watch一般有三种用法：1.阉割版（简写）语法：watch: { 侦听数据: function ( 新数据, 旧数据 ) { ----- 可以在此处进行操作 ------ }}代码实例：<body> <div id="root"> <h2>{{num}}</h2> <butt...
复制链接

扫一扫

专栏目录