数组的侦听

最新推荐文章于 2024-06-13 23:47:14 发布

LiJIAQ1

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量45

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_64946194/article/details/128070213

版权

1.侦听器的基本结构：

<script>
        new Vue({
            el:'',
            data:{},
            methods:{},
            //侦听器
            watch:{
                //参数一：改变后的值
                //参数二：改变前的值
                要侦听的数据(newValue,oldValue){
 
                }
            }
        })
    </script>

作用：用来侦听数据有没有变化，一旦有变化就调用函数

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

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

2.侦听器的基本使用：

<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>

3.侦听器在数组中使用：

<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>