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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
js实现tab切换效果
Feb 16 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 Javascript
基于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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
django使用xadmin的全局配置详解
2019/11/15 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
selenium自动化测试入门实战
2020/12/21 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
电子专业毕业生自我鉴定
2014/01/22 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
2015年护士节慰问信
2015/03/23 职场文书