vue2.0侦听器

✪ω✪玖忆惜梦✪ω✪

已于 2022-03-27 21:50:54 修改

阅读量1.1k

点赞数

分类专栏：前端文章标签：前端 vue

于 2022-03-27 21:44:47 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44039897/article/details/123782527

版权

前端专栏收录该内容

19 篇文章

订阅专栏

1、watch侦听器

（1）允许开发者监视数据的变化，针对数据的变化做特定的操作

（2）方法格式的侦听器本质是一个函数，监听谁就设谁为函数名

（3）第一个参数是变化后的新值，第二个参数是变化前的旧值

<body>
    <div id="app">
        <input type="text" v-model="username">
    </div>

    <script src="./lib/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: ''
            },
            watch: {
                username(newVal, oldVal) {
                    console.log("我监听到了", newVal, oldVal);
                }
            }
        })
    </script>
</body>

2、immediate选项

（1）通过immediate选项让侦听器自动触发一次

（2）使用对象格式的侦听器

（3）handler()是侦听器处理函数

（4）immediate默认值是false

<body>
    <div id="app">
        <input type="text" v-model="username">
    </div>

    <script src="./lib/vue.js"></script>
    <script src="./lib/jquery.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'admin'
            },
            watch: {
                username: {
                    //侦听器处理函数
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal);
                    },
                    immediate: true
                }
            }
        })
    </script>
</body>

3、deep选项

如果侦听的是一个对象，如果对象中的属性发生变化，开启deep可以监听

<body>
    <div id="app">
        <input type="text" v-model="info.username">
    </div>

    <script src="./lib/vue.js"></script>
    <script src="./lib/jquery.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                info: {
                    username: 'admin'
                }
            },
            watch: {
                // 方法1
                /* info: {
                    handler(newVal) {
                        console.log(newVal);
                    },
                    deep: true
                } */

                //方法2
                'info.username'(newVal) {
                    console.log(newVal);
                }
            }
        })
    </script>
</body>

4、侦听器对比

（1）方法格式侦听器