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 条评论
登录 后参与评论

相关文章

来自专栏ytkah

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

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

3224
来自专栏coding for love

CSS入门4-引入CSS

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

653
来自专栏十月梦想

js定时器叠加处理方案

setInterval(function(),1000);设置一个定时器给定时器一个变量名字,如: var timer=setInterval(function...

1073
来自专栏Youngxj

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

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

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

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

642
来自专栏码生

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

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

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

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

20110
来自专栏HTML5学堂

CSS3 user-select 禁选文本

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

3756
来自专栏贺贺的前端工程师之路

Angular2 之 结构型指令几个概念

两种用法。(* 与 template) 控制宿主元素的模板。 在哪里去显示,viewcontain 怎么注入,属性的set语法的使用,是便捷的监听属性值变化...

742
来自专栏腾讯NEXT学位

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(下)

? 小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打...

884

扫码关注云+社区