数组的侦听

最新推荐文章于 2023-01-15 21:02:54 发布

环游一周

最新推荐文章于 2023-01-15 21:02:54 发布

阅读量103

点赞数

文章标签：算法数据结构

本文链接：https://blog.csdn.net/hyk495495/article/details/128045171

版权

和对象类似，数组也是引用类型，因此也存在负责的侦听规则。从理论上说，修改一个数组的内容，比如修改数组中某个元素的值，或者给数组添加新的元素等，都不会修改数组本身的地址（引用），因此也不会被侦听到。为此，Vue.js对数组做了特殊处理，使得使用标准得数组操作方法对数组所做得修改，都可以被侦听到。

1.使用标准方法修改数组可以被侦听到

当通过下列方法操作或更改数组时，变化可以被侦听到。

push() 尾部添加

pop() 尾部删除

unshift() 头部添加

shift() 头部删除

splice() 删除、添加、替换

sort() 排序

reverse() 逆序

侦听器的基本使用

<body>
    <div id="app">
        <button @click="msg= '再见' ">修改msg的值</button>
        <p>{{ msg }}</p>
    </div>
    <script src="../vue.js"></script>
 
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'你好'
            },
            //写侦听器的地方
            watch:{
                //侦听的数据变化
                //基本数据类型，这两个参数有意义
                msg(newValue,oldValue){
                    //侦听到数据变化之后，需要完成的行为
                    console.log('数据改变了',newValue,oldValue);
                }
            }
        })
    </script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="list.push('蜡笔小新')">添加一个项</button>
        <button @click="list.pop()">删除一个项</button>
        <!-- 利用索引值改变数组时，不能被侦听到 -->
        <button @click="list[0] = '病猫' ">修改第一项</button>
        <button @click="list.splice(1,0,'天气之子')">第二项添加</button>
        <ul>
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
    </div>
 
    <script src="../vue.js"></script>
 
    <script>
        new Vue({
            el:'#app',
            data:{
                list:['龙猫','哈尔的移动城堡','千与千寻','你的名字']
            },
            watch:{
                //侦听list的改变
                list(){
                    console.log('数组改变了');
 
                    //把数据存到本地存储
                    //本地存储只能存字符串，复杂类型要转成JSON字符串才能存储
                    window.localStrage.setItem('note',JSON.stringify(this.list))
                }
            }
        })
    </script>
</body>
</html>

在数组中使用侦听器总结:

1.彻底替换为一个新数组,那么可以被侦听到。

2.如果使用了push()等标准的数组操作方法,那么可以被侦听到。

3.如果直接修改数组的元素,那么无法被侦听到。

(解决方法:使用$set(()方法修改元素的值。Vue3语法。)

不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。

侦听器在数组中的使用

<body>
    <div id="app">
        <li v-for="item in list">
            {{item}}
        </li>
        <ul>
            <button @click="list.push('蜡笔小新')">添加一个项</button>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:['千与千寻','哈尔的移动城堡','龙猫']
            },
            watch:{
                //复杂数据类型，这两个参数没有意义，因为地址没变。
                //所以复杂类型中，一般不会写这两个参数，因为这两个参数的值是一样的，就算写也是写一个。
                list(newValue,oldValue){
                    console.log('数组改变了',newValue,oldValue);
                }
            }
        })
    </script>
</body>

数组是应用类型,存在比较复杂的侦听规则。

从理论上说，修改一个数组的内容，比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。为此.Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。