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中定义的他会收集依赖,然后触发的时候,重新渲染页面,没定义的就收集不到依赖。

你可能感兴趣的:(Vue.set() 和this.$set())