VUE学习笔记--侦听器

文章目录

- watch侦听器
- 侦听器注意点
- 对象格式的侦听器
- 深度侦听

watch侦听器

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作
语法格式：

javascript">        const v = new Vue({
            el: "#app",
            data: {
                username: ''
            },
            watch: {
                //监听username的变化
                // newVal变化之后的值，oldVal变化之前的值
                username( newVal, oldVal ) {
                    console.log(newVal, oldVal);
                    
                }
            }
        })

示例：

javascript"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="username">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const v = new Vue({
            el: "#app",
            data: {
                username: ''
            },
            watch: {
                //监听username的变化
                // newVal变化之后的值，oldVal变化之前的值
                username( newVal, oldVal ) {
                    console.log(newVal, oldVal);
                    
                }
            }
        })
    </script>
</body>
</html>

请添加图片描述

侦听器注意点

1.所有的侦听器要定义在watch节点下
2.侦听器本质为函数，要监视哪个数据的变化就把数据名作为方法名即可
3.侦听器的参数，新值在前，旧值在后

对象格式的侦听器

对象格式的侦听器可以通过immediate让侦听器自动触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="username">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">javascript"></script>
    <script>javascript">
        const v = new Vue({
            el: "#app",
            data: {
                username: '1'
            },
            watch: {
                // 对象格式的侦听器
                username: {
                    // 侦听器的处理函数
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal);
                    },
                    // 默认值为false，要一开始就触发，值填true
                    immediate: true
                }
            }
        })
    </script>
</body>
</html>

请添加图片描述

深度侦听

侦听的是一个对象，对象中的属性发生变化不会触发侦听器
解决：
1.开启深度监听，只要对象中的属性发生变化就会触发侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="info.username">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">javascript"></script>
    <script>javascript">
        const v = new Vue({
            el: "#app",
            data: {
                // 用户信息对象
                info: {
                    username: '1'
                }
            },
            watch: {
                // 对象格式的侦听器
                info: {
                    // 侦听器的处理函数
                    handler(newVal) {
                        console.log(newVal);
                    },
                    // 开启深度侦听
                    deep: true
                }
            }
        })
    </script>
</body>
</html>

请添加图片描述

2.侦听对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="info.username">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">javascript"></script>
    <script>javascript">
        const v = new Vue({
            el: "#app",
            data: {
                // 用户信息对象
                info: {
                    username: '1'
                }
            },
            watch: {
                //侦听对象的属性
                //侦听对象的属性，必须包裹单引号
                'info.username'(newVal, oldVal) {
                    console.log(newVal, oldVal);
                    
                }                
            }
        })
    </script>
</body>
</html>