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

相关文章

来自专栏菩提树下的杨过

Flex4中的ModuleLoader,Alert以及TitleWindow

1、ModuleLoader 在Asp.Net开发中,经常会把页面的公共部分封装成自定义控件ascx,以达到重用或动态加载的目的。在Flex4中MXML Mod...

2225
来自专栏逸鹏说道

MVC视图展现模式之移动布局解析-续集

网站就必须用响应式布局吗?MVC视图展现模式之移动布局:http://www.cnblogs.com/dunitian/p/5213787.html 有人会疑问...

2478
来自专栏大前端开发

使用mpvue开发小程序教程(五)

在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法。在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,...

1092
来自专栏Python、Flask、Django

Django The messages framework

1152
来自专栏杂烩

katalon中REST URL占位参数动态化

REST URL中占位参数很常见,但是在测试中就会带来一些麻烦,比如ab中URL是死的,不能变化的,而在katalon中则可以很轻松的处理这个问题。

552
来自专栏搞前端的李蚊子

小程序第三方框架对比 ( wepy / mpvue / taro )

     众所周知如今市面上端的形态多种多样,手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同...

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

一个Web页面的问题分析

几个月之前我接到一个新的开发任务,要在一个旧的Web页面上面增添一些新的功能。在开发的过程中发现旧的代码中有很多常见的不合适的写法,结合这些问题,如何写出更好的...

1849
来自专栏跟着阿笨一起玩NET

C# 子窗体中调用父窗体中的方法(或多窗体之间方法调用)

本文转载:http://www.csframework.com/archive/2/arc-2-20110805-1771.htm

1202
来自专栏BestSDK

年薪30万的前端面试题,你能答对几道?|附答案

HTML面试题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元...

3866
来自专栏恰同学骚年

ASP.Net MVC开发基础学习笔记:二、HtmlHelper与扩展方法

  在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,毕竟微软的MVC就是传统的请求处理响应的回归。所以抛弃之前的那种事件响应的模型,抛弃服...

872

扫码关注云+社区