vue的侦听器及怎么侦听数组

news/2024/7/10 0:58:06 标签: vue

作用

侦听属性响应数据的变化，当数据发生改变的时候会立即执行对应的函数。

<body>
    <div id="test">
        <input type="text" v-model="entry">
    </div>
    <script>
        let vm = new Vue({
            el: "#test",
            data: {
                entry: ""
            },
            watch: {
                entry() {
                    console.log("侦听到了");
                }
            }
        })
    </script>
</body>

在这里插入图片描述

这里我同过侦听器和v-model指令一起用可以更直观的体现他的作用（这也是常用搭配）。

原理：当input输入内容后，因为v-model指令的绑定，此时entry属性值会随之变化。侦听器在侦听到了entry属性变化后触发侦听事件打印 “侦听到了”。

侦听事件的参数

侦听器在侦听到属性值改变后，会触发一个侦听事件，此事件可以有两个参数。

    1.newval   更改后的数据
    2.oldval   更改前的数据

注意：这两个参数的名字不能变，第一个必须是newval第二个必须是oldval，否则会报错

<body>
    <div id="test">
        <input type="text" v-model="entry">
    </div>
    <script>
        let vm = new Vue({
            el: "#test",
            data: {
                entry: ""
            },
            watch: {
                entry(newval,oldval) {
                    console.log(newval);
                    console.log(oldval);
                    console.log("----------------分割线-----------------");
                }
            }
        })
    </script>
</body>

在这里插入图片描述
输入第一个数“1”的时候，由于没有旧数据，所以打印出来的是空字符串

深度侦听

作用：侦听到引用类型的内部属性值的变化（普通侦听无法直接侦听到对象、数组里面的某个值的变化）

如下代码：不使用深度侦听去侦听引用类型的值

    <span id="test">侦听的值:{{ val }}</span>
    <script>
        let vm = new Vue({
            el:"#test",
            data:{
                val:{a:"第一个值",b:"第二个值"}
            },
            watch:{
                val(){
                    console.log("侦听到了");
                }
            }
        })
    </script>

在这里插入图片描述

可以看到，改变了引用类型的属性值虽然页面渲染了，但侦听并未触发

如果想要侦听到首先得了解handler、deep

handler 方法就相当于普通侦听器触发的事件
deep 方法标志这是一个深度侦听

修改代码成如下

    <span id="test">侦听的值:{{ val.a }}</span>
    <script>
        let vm = new Vue({
            el:"#test",
            data:{
                val:{a:"第一个值",b:"第二个值"}
            },
            watch:{
                val:{
                    handler(){
                        console.log("侦听");
                    },             
                    deep:true
                }
            }
        })
    </script>

在这里插入图片描述
打印出了“侦听两字”，代表侦听成功

侦听数组
数组是无法直接被侦听和渲染的，即便是加了deep也无法渲染或则侦听，但我们可以通过侦听其他属性的值这种方法来改变数组的值达到同步渲染的效果。

    <span id="test" :key="ke">侦听的值:{{ val }}</span>
    <script>
        let vm = new Vue({
            el:"#test",
            data:{
                val:["第一个值","第二个值"],
                ke:0
            },
            watch:{
                ke(){
                    this.val[0]="123"
                }
            }
        })
    </script>