Vue.set() 和this.$set()

这两个方法其实是差不多的,可以说几乎是一样的,只不过set是绑定在Vue构造函数上,$set()是绑定在Vue原型上的。


我们会遇到一个情况就是在data中定义的数据更改后,会进行页面渲染,但是在data中没定义的数据更改是不会重新渲染页面的,例如: data: {  obj:{a:3}}  ,   this.obj.a=4 会重新渲染,this.obj.b=2. 这种是不会重新渲染在页面上的。

这时候就需要this.$set(this.obj,'b',2) .这样可以解决不重新渲染的问题。

源码角度:

数组情况:



我们可以看到,Vue的数组里指向的是一个对象,这个对象里面有splice等方法,只有这里面的7个方法才能触发渲染,对象里的__proto__才是指向Array 的对象。所以当我们直接更改数组的时候不会渲染页面.

使用set方法后其实就是调用了Vue数组中的splice,所以触发了渲染。

对象情况:

对象的时候,data中定义的他会收集依赖,然后触发的时候,重新渲染页面,没定义的就收集不到依赖。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2019年8月14号上午,有个需求为,根据点击的按钮 联动一个下拉列表,如,点击“全部”,下拉列表显示所有的选项,...
    c6e71129966d阅读 2,460评论 0 0
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,282评论 0 25
  • 深入响应式 追踪变化: 把普通js对象传给Vue实例的data选项,Vue将使用Object.defineProp...
    冥冥2017阅读 4,907评论 6 16
  • VUE介绍 Vue的特点构建用户界面,只关注View层简单易学,简洁、轻量、快速渐进式框架 框架VS库库,是一封装...
    多多酱_DuoDuo_阅读 2,769评论 1 17
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,134评论 0 2