Vue中数组的响应式操作

在Vue中对数组的响应式操作主要由以下几种：

//********数组的响应式操作方法//1.push():从最后插入元素this.nums.push('push','a','b');//2.pop():删除数值中的最后一个元素this.nums.pop();//3.shift():删除数组中的第一个元素this.nums.shift();//4.unshift():在数组最前面添加元素this.nums.unshift('unshift','a','b');//5.splice():指定位置删除、插入、替换元素。传入三个参数(sta,sec,thi)。this.nums.splice(1,2);//删除元素时,sta:要删除元素的位置,sec:要删除元素的个数。this.nums.splice(1,3,'m','n','l')//替换，第一个元素后面的三个元素替换为'm'、'n'和'l'。this.nums.splice(1,0,'W','Z');//插入元素，在第一个位置后面插入'W'、'Z'。//6.sort():排序this.nums.sort();//7.reverse():将数组内容反转this.nums.reverse();

而通过数组的下标值进行赋值的操作不是响应式的：

this.nums[0] = 'aaaa';

这种方法修改数组不会引起页面的动态刷新，解决方法有以下两种方式：

        //解决方式//1.splice方法this.nums.splice(0,1,'aaa');//2.vue的方法Vue.set(this.nums,0,'aaa');

能够达到同样的目的。

Vue中数组的响应式操作相关推荐

如何优雅的在 vue 中使用非响应式对象_一篇文章上手Vue3中新增的API
1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install @vue/composition-api -S/ ...
在vue中使用flexible响应式布局——默认html字体大小（font-size)是54px的问题
rem响应式布局中,最著名的就是淘宝出品的flexible,马上到新公司,听经理说会有大屏幕展示,所以周末研究一下. 先使用命令创建一个vue项目 vue init webpack 项目名称安装fl ...
MVVM 和 VUE三要素：响应式、模板引擎、渲染
本文将详细解答以下问题如何理解mvvm 说一下使用jQuery和使用mvvm框架的区别说一下对mvvm的理解 vue如何实现响应式 vue如何解析模板 vue的整个实现流程 jQuery和vue的 ...
vue中数组的七个响应式方法
vue中数组的七个响应式方法起因: 在使用vue实习中,通过数组的索引改变了数组中的值,测试时发现,更改成功了,但是试图无响应. 原因: *通过索引值修改数组元素,不是响应式方法* // 以下代 ...
vue如何在style标签中使用data响应式数据？
文章目录一.面临到的需求? 二.如何在css中使用变量? 三.vue如何在style标签中使用data响应式数据? 一.面临到的需求? 首先我们知道css对应是有伪类的,如:hover, :acti ...
vue源码之响应式数据
分析vue是如何实现数据响应的. 前记现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...
Vue中数组变动监听
Vue中数组变动监听 Vue的通过数据劫持的方式实现数据的双向绑定,即使用Object.defineProperty()来实现对属性的劫持,但是Object.defineProperty()中的set ...
VSCode自定义代码片段10—— 数组的响应式方法
数组的响应式方法 {// arr'fuction// 10 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... => 自定义 ...
从数组的响应式看下一代响应式数据
随着MVVM框架的广泛使用响应式数据已经变得耳熟能详,现在谈响应式数据好像有点炒冷饭的意思,对!没错!不过这次炒的是蛋炒饭,而且还是加火腿肠的那种.之前看过几个框架的响应式数据实现,貌似都对数组(Ar ...
VUE源码解析-响应式原理的实现
前言相信vue学习者都会发现,vue使用起来上手非常方便,例如双向绑定机制,让我们实现视图.数据层的快速同步,但双向绑定机制实现的核心数据响应的原理是怎么样的呢,接下来让我们开始介绍: functi ...

Vue中数组的响应式操作

Vue中数组的响应式操作相关推荐

最新文章

热门文章