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

Vue数据响应原理

官方的解释很清晰：

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。 用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。 每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

总结：

1.数组更改值或者增加删除值，不会触发更新。
2.对象更改值可触发更新，增加或者删除属性不会触发更新。
3.对象数组：数组中的对象更改值会触发更新。

一、纯数组-------showArr:[true,true]

数组中元素直接赋值，---不触发刷新

this.showArr[0]=!this.showArr[0];

数组修改后整体赋值，---不触发刷新

var parr=this.showArr;
parr[0]=!parr[0];
this.showArr=parr;

数组重新复制出一份新的，修改后整体赋值，---可触发刷新

var parr=this.showArr.slice(0);
parr[0]=!parr[0];
this.showArr=parr;

用$set赋值，---可触发刷新

this.$set(this.showArr,0,!this.showArr[0])

二、纯对象-------showArr:{'showBool':true}

对象中元素直接赋值，---可触发刷新

this.showArr['showBool']=!this.showArr['showBool'];

对象修改后整体赋值，---可触发刷新

var parr=this.showArr;
parr['showBool']=!parr['showBool'];
this.showArr=parr;

用$set赋值，---可触发刷新

this.$set(this.showArr,'showBool',!this.showArr['showBool']);

三、 对象数组-------showArr:[{'showBool':true},{'showBool':true}]

数组中元素直接赋值，---可触发刷新

this.showArr[0]['showBool']=!this.showArr[0]['showBool'];

数组修改后整体赋值，---可触发刷新

var parr=this.showArr;
parr[0]['showBool']=!parr[0]['showBool'];
this.showArr=parr;

数组重新复制出一份新的，修改后整体赋值，---可触发刷新

var parr=this.showArr.slice(0);
parr[0]['showBool']=!parr[0]['showBool'];
this.showArr=parr;

用$set赋值，---可触发刷新

this.$set(this.showArr[0],'showBool',!this.showArr[0]['showBool']);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vue中数组和对象更改后视图不刷新的问题

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

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

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

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

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

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

  • python运行时强制刷新缓冲区的方法

    需求:打印一颗"*"休息1s 代码如下: #!/usr/bin/python #coding=utf-8 ''' 暂停1s输出 ''' import time def printStar(n): for i in range(n): print " * ", time.sleep(1) if __name__ == '__main__': printStar(10) 输出结果(等待10s后一次性输出): [root@miner_k test]# python sle

  • 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是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为: (1).在App.vue中加入 这里是所有页面切换到地方,下面代码分别对不同的设置,采用不同的渲染方式. <template>   <div id="ap

  • vue开发中数据更新但视图不刷新的解决方法

    目录 **解决方法1:静默刷新(使用v-if的特性) 解决方法2:Vue.$set(官方推荐) 解决方法3: Vue.$forceUpdate(手动强制更新视图) 解决方法4:Object.assign(使用修改栈能触发视图更新的特性) 解决方法5:对于数组还可以使用splice方法 总结 我们在开发过程中会碰到数据更新,但是视图并未改变的情况,情况如下: 第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到: 第二种:通过数组下标修改数组中的元素或者手动修改数组的长度,V

  • JavaScript判断变量是对象还是数组的方法

    typeof都返回object 在JavaScript中所有数据类型严格意义上都是对象,但实际使用中我们还是有类型之分,如果要判断一个变量是数组还是对象使用typeof搞不定,因为它全都返回object 复制代码 代码如下: var o = { 'name':'lee' }; var a = ['reg','blue'];   document.write( ' o typeof is ' + typeof o); document.write( ' <br />'); document.wr

  • 详解Vue改变数组中对象的属性不重新渲染View的解决方案

    在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图. 受到javascript的限制,Vue不能检测到对象属性的添加或删除,因为vue在初始化实列时将属性转为getter/setter,所以属性必须在data对象上才能让vue转换它. 但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上:如下代码: Vue.set(obj, '_isHover', true);

  • Vue 数组和对象更新,但是页面没有刷新的解决方式

    在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化. <ul> <li v-for="(item,index) in todos" :key="index">{{item.name}}</li> </ul> data () { return { msg: 'Welcome to Your Vue.js App', todos: [{ name: 'aa', age: 14 }, { nam

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

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

随机推荐