vue检测对象和数组的变化分析

在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。可以直接在子组件修改对象或数组，但是并不会数据改变就会引起变化。

检测对象变化

1、不能检测到对象属性的添加或删除

var vm = new Vue({
 data:{
   data111:{
     a = 1
   }
 }
})

data111.a = 2;//这个可以引起变化

但data111.b = 2；和vm.b = 2这个不能检测到变化

需要用

Vue.set(object, key, value)

比如$set(data111, b, 2);

或者：

$set(key,value)

比如vm.$set(‘b', 2)；

检测数组变化

下面两种情况不能检测到变化：

1、直接通过索引设置元素，如arr[0]=12;

2、直接修改数组的长度，如vm.arr.length

Vue.set( object, key, value )

用法：

this.$set(this.arr,0,12)

赞 (0)

相关推荐

  • vue.js移动数组位置,同时更新视图的方法

    使用vue.js v-for绑定若干个选项,需要对选项进行排序上下移动操作. 需要对options里面数组的位置进行交换,通常是这样来写: 假设向前移动一个: var index = this.options.indexOf(option); //获取当前选项对象在数组里面的索引. var tempOption = this.options[index-1]; //存储前一个 this.options[index-1] = option;(this.options[index]) this.op

  • Vue不能观察到数组length的变化

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 因为vue的响应式是通过 Object.defineProperty 来实现的,但是数组的length属性是不能添加getter和setter,所有无法通过观察length来判断. 为什么Vue不能观察到数组length的变化 如下代码,虽然看

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

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

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

  • vue数组对象排序的实现代码

    前言 最近在看vue的教学视频,正好学到的数组对象排序方法,在这跟大家分享一下,如有不足之处,请赐教. 普通数组的排序 先看代码: <div class="app"> <h1>v-for实例</h1> <hr> <ol> <li v-for="number in numbers">{{number}}</li> </ol> </div> <script&

  • Vue 获取数组键名的方法

    json 数组结构如下 "head": [{ "brand": "../static/images/brand.svg" }], "main": [{ "教程": [] }, 想要获取 "教程" 这两个字作为标题,.vue中方法如下 <h1> {{Object.keys(sMain)[0]}} <h1> 其中的sMain是父级传下来的数组 import sourc

  • 浅析vue.js数组的变异方法

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 都有什么功能?动手试验了一下: <body> <div id="app"> <div> push方法: <input type="text" v-model="text" @keyup.enter="me

  • vue源码学习之Object.defineProperty 对数组监听

    上一篇中,我们介绍了一下defineProperty 对对象的监听,这一篇我们看下defineProperty 对数组的监听 数组的变化 先让我们了解下Object.defineProperty()对数组变化的跟踪情况: var a={}; bValue=1; Object.defineProperty(a,"b",{ set:function(value){ bValue=value; console.log("setted"); }, get:function(

  • Vue监听数组变化源码解析

    上一篇的代码中,忽略了对数组的处理,只关心了需要关心的部分,假装数组不存在. 这一篇开始考虑数组的问题. 从最简单的入手 先考虑一个问题,如何监听数组中的对象变化?忽略掉数组本身及其中的一般值,只考虑对象数组中的对象. 遍历数组,而后对数组中的每个对象调用 observe 方法 // 上一篇中出现的未曾重写的代码,这一篇中不再重复 var Observer = function Observer(value) { this.value = value; this.dep = new Dep();

  • vue检测对象和数组的变化分析

    在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态.可以直接在子组件修改对象或数组,但是并不会数据改变就会引起变化. 检测对象变化 1.不能检测到对象属性的添加或删除 var vm = new Vue({ data:{ data111:{ a = 1 } } }) data111.a = 2;//这个可以引起变化 但data111.b = 2:和vm.b = 2这个不能检测到变化 需要用 Vue.set(o

  • Vue绑定对象与数组变量更改后无法渲染问题解决

    Vue绑定对象与数组变量更改后无法渲染问题解决

    项目场景: 在页面显示上有一个<ul>标签,我们需要动态进行列表数据的展示,而由于我们的页面上除了列表值,还有其他的值要进行展示,因此列表数据的数据结构是某个对象下面的数组,在动态修改数据后发现没有进行自动渲染. 问题描述: 在点击按钮"click me!"时虽然数据有变化且在控制台进行了输出,但是列表数据并没有发生渲染. 代码如下: <script src="https://unpkg.com/vue/dist/vue.js"></s

  • js/jquery遍历对象和数组的方法分析【forEach，map与each方法】

    本文实例讲述了js/jquery遍历对象和数组的方法.分享给大家供大家参考,具体如下: JS forEach方法 arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项,index当前项的索引,array原始数组: 数组中有几项,那么传递进去的匿名回调函数就需要执行几次: 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改:但是可以自己通过数组的索引来修改原来的数组: va

  • vue改变对象或数组时的刷新机制的方法总结

    Vue数据响应原理 官方的解释很清晰: 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty 是ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因. 用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改

  • 解决vue无法侦听数组及对象属性的变化问题

    一.数组 1.可以监听到的情况 如push.splice.=赋值(array=[1,2,3]) 2.无法监听到的情况 使用下标修改某个元素(这种比较常见) array[index] = 1 object.a = 3 直接修改数组length array.length = 5 3.解决方案 this.$set(array, index, data) - 这是个深度的修改,某些情况下可能导致你不希望的结果,因此最好还是慎用 this.dataArr = this.originArr this.$se

  • Vue 检测变化的注意事项

    Vue 检测变化的注意事项

    目录 深入响应式原理 如何追踪变化 检测变化的注意事项 对于对象 对于数组 声明响应式 property 异步更新队列 深入响应式原理 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题.在这个章节,我们将研究一下 Vue 响应式系统的底层的细节. 如何追踪变化 当你把一个普通的 JavaScript 对象传入 Vue 实例作为

  • vue将对象新增的属性添加到检测序列的方法

    vue中将对象中新增的属性增加到检测序列中 deepCopy(o1, o2) { // 将o2的内容拷贝给data中的o1 var key, i if (o2 instanceof Array) { for (i = 0; i < o2.length; i++) { if (o2[i] instanceof Array) { this.$set(o1, i, []) this.deepCopy(o1[i], o2[i]) } else if (o2[i] instanceof Object) {

  • 在vue中对数组值变化的监听与重新响应渲染操作

    在我们项目开发过程中,实例中的数据类型可以是对象.数组等.在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求.或者查阅这篇文章 例如: <script> export default { data(){ return { objVal: { name: 'obj', type: 'obj' } } }, watch:{ objVal:{ handler(val,oldval){ }, deep: true, } }, methods:{ changeObj()

  • vue深度监听(监听对象和数组的改变)与立即执行监听实例

    1.vue中监听对象数据属性值的改变,可以使用深度监听 data () { return { form: { status: '', cpufrequency: '', systemstacksize: '', scalabilityclass: '' } } }, watch: { form: { // 深度监听 handler(val, oldVal){ console.log('currentForm',val, oldVal) // 但是这两个值打印出来却都是一样的,因为它们的引用指向同

随机推荐