Vue.set() this.$set()引发的视图更新思考

引文

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

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

由此引出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属性来实现想要的功能。

深入响应式原理

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第144天:PS切图方法总结

    PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从Pho...

1202
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件

我们在上面《页面分类》的项目中,对 tap 事件的处理使用的是 touch 事件处理的,因为如果使用 click 事件的话,总会有延时。

962
来自专栏葡萄城控件技术团队

你不可不知的HTML优化技巧

如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。 很显然HTML 已经达到了一个瓶颈...

2106
来自专栏Youngxj

bootstrap简洁居中毛玻璃登录源码

4155
来自专栏HTML5学堂

CSS3 user-select 禁选文本

HTML5学堂:当我们在访问一个文章网站的时候,常常因为拖拽的时候误选文字,给我们的一种不好的用户体验,而我们可以用CSS3的user-select属性禁选文本...

3816
来自专栏码生

自定义 AlertView,自定义图片icon,自定义按钮样式,自定义内容

872
来自专栏谈补锅

html表单提交

1、只能为input、textarea、select三类类型的标签。只有这些标签用户才可能修改值,<label>、<p>、<font>等标签仅供显示用,没有提交...

1723
来自专栏ytkah

微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现

先来看看今天的整体思路: 进入分组管理页面-->点击新建分组新建 进入到未分组页面基本操作 进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作。 ? ...

3484
来自专栏编程

在HTML中如何使用CSS?

一、前言 在 HTML 中使用 CSS,包括内联式、内嵌式、链接式和导入式。 二、分类 2.1 内联式 内联式是所有样式应用方式中最为直接的一种,它通过对 HT...

18910
来自专栏偏前端工程师的驿站

JS魔法堂:LINK元素深入详解

一、前言                               我们一般使用方式为 <link type="text/css" rel="styleshe...

21710

扫码关注云+社区