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

更新时间：2019年04月24日 09:36:29 作者：yuhehanfeng

这篇文章主要介绍了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']);

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

您可能感兴趣的文章:

在 Vue 应用中使用 Netlify 表单功能的方法详解
Netlify 带有内置表单处理功能，可以用来存储表单数据，下载 csv 文件，同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求。这篇文章主要介绍了在 Vue 应用中使用 Netlify 表单功能,需要的朋友可以参考下
2019-06-06
在Vue中使用scoped属性实现样式隔离的原因解析
scoped是Vue的一个特殊属性,可以应用于<style>标签中的样式,这篇文章给大家介绍在Vue中,使用scoped属性为什么可以实现样式隔离,感兴趣的朋友一起看看吧
2023-12-12
vue下载文件以及文件重命名方式
这篇文章主要介绍了vue下载文件以及文件重命名方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue脚手架搭建及创建Vue项目流程的详细教程
Vue脚手架指的是vue-cli,它是一个快速构建**单页面应用程序(SPA)**环境配置的工具，cli是(command-line-interfac)命令行界面,下面这篇文章主要给大家介绍了关于Vue脚手架搭建及创建Vue项目流程的相关资料,需要的朋友可以参考下
2022-09-09
Vue+Echarts报错Cannot set properties of undefined (settin
这篇文章主要介绍了Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘)的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue 解决form表单提交但不跳转页面的问题
今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
Vue.js自定义指令学习使用详解
这篇文章主要为大家详细介绍了Vue.js自定义指令的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
使用Vue+ElementUI动态生成面包屑导航教程
Vue和ElementUI都是非常流行的前端开发框架,它们可以让我们更加便捷地开发前端应用,下面这篇文章主要给大家介绍了关于使用Vue+ElementUI动态生成面包屑导航的相关资料,需要的朋友可以参考下
2023-05-05
Vue2.0父子组件传递函数的教程详解
这篇文章主要介绍了Vue2.0父子组件传递函数的教程详解,需要的朋友可以参考下
2017-10-10
vue解决Not allowed to load local resource问题的全过程
这篇文章主要给大家介绍了关于vue解决Not allowed to load local resource问题的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-10-10