Vue.set() this.$set()引发的视图更新思考及注意事项


Posted in Javascript onAugust 30, 2018

引文

vue文档列表渲染中有条注意事项:

Vue.set() this.$set()引发的视图更新思考及注意事项

这里提到的两种情况实际改变了数据但是没有触发视图更新。

由此引出Vue.set(),先上文档API:

 

this.$set()Vue.set()本质方法一样,前者可以用在methods中使用。

set方法调用时,可以触发页面全部重新渲染。

比如在vue中有个data数组arr:

//arr=[1,2,3]
  arr[1]='b'
  console.log(arr) // [1,2,3]
  Vue.set(arr,2,'c')
  console.log(arr) // [1,b,c]

可以看出set触发了整个页面的重新渲染,连arr[1]='b'的效果也被重新渲染了。

使用set添加数据

Vue.set()不光能修改数据,还能添加数据,弥补了Vue数组变异方法的不足。

可以使用set添加数据这一特性,解决一些常见问题。

例如循环出的元素点击应用选中样式,再点击取消选中样式。

<section v-for="item in list">
  <div :class="['xxclass',item.checked?'checked':'']"></div>
</section>
<!--这里通过判断item的**本身不存在的checked属性**来决定是否增加checked样式类-->

点击方法如下:

clickHandle: function(item){
  if(typeof item.checked === 'undefined'){
   this.$set(item, 'checked', true)
  } else {
   item.checked = !item.checked
  }
}
// 如果item没有checked属性就用set方法添加,有则取反

这就利用set使用了对象中本身不存在的checked属性来实现想要的功能。

深入响应式原理

至于视图更新时机可以看文档深入响应式原理

总结

以上所述是小编给大家介绍的Vue.set() this.$set()引发的视图更新思考及注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
jquery操作select大全
Apr 25 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
基于Angularjs-router动态改变Title值的问题
Aug 30 #Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 #Javascript
vue-router动态设置页面title的实例讲解
Aug 30 #Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 #Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 #Javascript
vue中rem的配置的方法示例
Aug 30 #Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 #Javascript
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
用PHP读取IMAP邮件
2006/10/09 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
jQuery实现多按钮单击变色
2014/11/27 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
JavaScript中this详解
2015/09/01 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
javascript实现贪吃蛇小练习
2020/07/05 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python实现的简单计算器功能详解
2018/08/25 Python
Python logging模块用法示例
2018/08/28 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
效能监察建议书
2014/05/19 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
工作态度检讨书范文
2015/05/06 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
python之django路由和视图案例教程
2021/07/26 Python
spring boot中nativeQuery的用法
2021/07/26 Java/Android
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python