数组的侦听

最新推荐文章于 2024-06-19 20:53:45 发布

Issssy

最新推荐文章于 2024-06-19 20:53:45 发布

阅读量1.1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Issssy/article/details/128033311

版权

1.侦听器的基本结构

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

语法：在和data、methods这些平级的位置写一个watch

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

                }
            }
        })
    </script>

对数组进行侦听

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

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

1.Vue不能检测以下数组的变动:

a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue

b.当你修改数组的长度时,例如:vm.items.length = newlength

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

https://v2.cn.vueis.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

push() 尾部添加

pop()尾部删除

unshift()头部添加

shift()头部删除

splice()删除、添加、替换

sort()排序

reverse()逆序

(Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)

2.侦听器的基本使用

<body>
    <div id="app">
        <button @click=

最低0.47元/天解锁文章

Issssy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数组的侦听

1.彻底替换为一个新数组,那么可以被侦听到。2.如果使用了push()等标准的数组操作方法,那么可以被侦听到。3.如果直接修改数组的元素,那么无法被侦听到。(解决方法:使用$set(()方法修改元素的值。Vue3语法。)不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。
复制链接

扫一扫