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


Posted in Javascript onApril 24, 2019

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']);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
最佳JS代码编写的14条技巧
Jan 09 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
详解Vue源码中一些util函数
Apr 24 #Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 #Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 #Javascript
详解一个小实例理解js原型和继承
Apr 24 #Javascript
微信小程序实现的一键复制功能示例
Apr 24 #Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 #Javascript
解决vue 单文件组件中样式加载问题
Apr 24 #Javascript
You might like
php截取中文字符串不乱码的方法
2013/12/25 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
python3.0 字典key排序
2008/12/24 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
python logging设置level失败的解决方法
2020/02/19 Python
python为什么要安装到c盘
2020/07/20 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
Python 内存管理机制全面分析
2021/01/16 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
中国网上药店领导者:1药网
2017/02/16 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
类和结构的区别
2012/08/15 面试题
大学生就业自荐信
2013/10/26 职场文书
认购协议书范本
2014/04/22 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
react 路由Link配置详解
2021/11/11 Javascript
Python如何让字典保持有序排列
2022/04/29 Python