vue.js关于数组的响应式方法的介绍

星光宇辰

已于 2022-03-07 22:34:01 修改

阅读量870

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web前端总结文章标签： linq c#

于 2022-03-07 22:16:09 首次发布

本文链接：https://blog.youkuaiyun.com/NXBBC/article/details/123341225

web前端总结专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了JavaScript中数组的各种操作方法，如push、pop、shift、unshift、splice、sort、reverse，以及在Vue框架下如何通过Vue.set实现响应式更新。示例代码展示了这些方法的具体用法，帮助开发者更好地理解和运用这些数组操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解释：下面代码中的person是data中定义的数组变量

（1）push(),从最后添加数据
this.person.push('pusha');

（2）pop(),从最后一位删除
this.person.pop();

（3）shift(),删除数组第一位元素
                       this.person.shift();
（4）upshift(),从第一位添加元素,可添加多个
                       this.person.unshift('aaa','bbb');
（5）splice(start(起始位置),length(待操作的元素个数),items(需要替换或插入的值)),任意位置插入/删除/替换元素。其中，当items值为0时不会执行删除操作。
                       this.person.splice(1,0,'add1','add2');//从当前位置插入两个数据
                       this.person.splice(1,2); //从当前位置删除两个数据
                       this.person.splice(1,2,'ch','dh'); //从当前位置替换两个数据
（6）sort(),排序
                       this.person.sort();
（7）reverse(),将数组转置输出
                       this.person.reverse();
（8）Vue.set(对象,索引,替换值)
                       Vue.set(this.person,1,'abc');

注意：通过索引值修改数组元素,不是响应式方法
                       this.person[0]='adda';

//push(),从最后添加数据
this.person.push('pusha');

//pop(),从最后一位删除
this.person.pop();

//shift(),删除数组第一位元素
this.person.shift();

//upshift(),从第一位添加元素,可添加多个
this.person.unshift('aaa','bbb');

//splice(start(起始位置),length(待操作的元素个数),items(需要替换或插入的值)),任意位置插入/删除/替换元素
this.person.splice(1,0,'add1','add2');//插入
this.person.splice(1,2);              //删除
this.person.splice(1,2,'ch','dh');    //替换

//sort(),排序
this.person.sort();

//reverse(),将数组转置输出
this.person.reverse();

//Vue.set(对象,索引,替换值)
Vue.set(this.person,1,'abc');