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 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
详解JavaScript按概率随机生成事件
Aug 02 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 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
PHP中的float类型使用说明
2010/07/27 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
php数组指针操作详解
2017/02/14 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
PHP中phar包的使用教程
2017/06/14 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python with (as)语句实例详解
2020/02/04 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
python pymysql库的常用操作
2020/10/16 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
大学生个人事迹材料
2014/01/21 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server
python中validators库的使用方法详解
2022/09/23 Python
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS