修改Vue数组没有响应式更新

由于 JavaScript 的限制,Vue 不能检测以下数组的变动:

(1)当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue

(2)当你修改数组的长度时,例如:vm.items.length = newLength

为了解决第一类问题,我列出了可以响应式更新的方法:

(1)push:在数组后面添加数据

this.list.push("ThinkPHP");
//还可以添加多个
this.list.push("ThinkPHP","node","Typescript");

:push(...items),可以添加多个

(2)unshift:在数组前面添加数据

this.list.unshift("ThinkPHP");

:unshift(...items),可以添加多个

(3)pop:删除数组中最后一个元素

this.list.pop();

(4)shift:删除数组中第一个元素

this.list.shift();

(5)splice:删除元素 / 插入元素 / 替换元素

语法结构:splice(start,length,value);

//替换下标0的,数量1个,值是php7.2
this.list.splice(0,1,"PHP7.2");

//删除下标0的,数量1个
this.list.splice(0,1);

//新增在下标0的,数量0个,值是PHP7.2
this.list.splice(0,0,"PHP7.2");

注:替换或新增就取决于第二个参数,0新增,1替换;还有第三个value是...item,可以有多个

(6)Vue.set

语法结构:set("要修改的对象",索引值,修改后的值);

//修改对象,下标,修改后的值
Vue.set(this.list,0,"Vue2.0");

原文地址:https://www.cnblogs.com/bushui/p/12210143.html

时间: 2024-11-08 21:30:08

修改Vue数组没有响应式更新的相关文章

vue新增属性响应式更新的问题

根据官方文档定义: 如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除. 由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的. 官方定义: Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property

vue原理探索--响应式系统

Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defineProperty,Vue.js就是基于它实现「响应式系统」的. 主要涉及属性: enumerable,属性是否可枚举,默认 false. configurable,属性是否可以被修改或者删除,默认 false. get,获取属性的方法. set,设置属性的方法. 响应式基本原理就是,在 Vue

Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vue.$set(target,key,value):可以动态的给数组.对象添加和修改数据,并更新视图中数据的显示. vue在构造函数new Vue()时,就通过Object.defineProperty中的getter和setter 这两个方法,完成了对数据的绑定.所以直接通过vm.arr[1] =

vue新增属性是否会响应式更新?

原文地址 在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除.由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data

Vue 及框架响应式系统原理

个人bolg地址 全局概览 Vue运行内部运行机制 总览图: 初始化及挂载 在 new Vue()之后. Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周期.事件. props. methods. data. computed 与 watch 等.其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数,用来实现「响应式」以及「依赖收集」,后面会详细讲到,这里只要有一个印象即可. 初始化之后调用 $mou

手写实现vue的MVVM响应式原理

MVVM响应式实现原理: 1.模板编译 2.数据劫持 3.watcher 文中应用到的数据名词: MVVM   ------------------        视图-----模型----视图模型                三者与 Vue 的对应:view 对应 template,vm 对应 new Vue({…}),model 对应 data nodeType       判断节点是否是元素节点 querySelector    创建一个元素节点 createDocumentFragme

Vue中的响应式原理

Vue最独特的特性之一,是其非侵入性的响应式系统. 响应式原理:数据变,页面变 Vue如何追踪变化 当把一个普通的JS对象传入Vue实例作为data选项时,Vue将遍历此对象的所有属性,并使用Object.defineProperty把这些属性全部转为getter/setter.Object.defineProperty是ES5中一个无法shim的特性,这也是Vue不支持IE8以及更低版本浏览器的原因. Object.defineProperty(obj, prop, descriptor)//

浅谈Vue响应式(数组变异方法)

很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用对方法.虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法.(如果你愿意一层一层地剥开我的心.你会发现,你会讶异-- 沉迷于鬼哭狼嚎 无法自拔QAQ). 前排提示,Vue的响应式原理主要是使用了ES5的Obj

Vue.js响应式原理

本文和大家分享的主要是Vue.js 响应式原理相关内容,一起来看看吧,希望对大家 学习Vue.js有所帮助. 关于Vue.js Vue.js 是一款 MVVM 框架,上手快速简单易用,通过响应式在修改数据的时候更新视图. Vue.js 的响应式原理依赖于 Object.defineProperty  ,尤大大在Vue.js 文档中就已经提到过,这也是 Vue.js 不支持 E8 以及更低版本浏览器的原因. Vue 通过设定对象属性的  setter/getter  方法来监听数据的变化,通过 g