vue源码 - set、$delete

资源

各种进阶资源 + 联系方式请看下方链接
资源

使用vm.$set

• 之前说过，如果动态的给vue data 中某个对象或者数组添加一个属性，那么是不会响应式的更新到视图上的
• 例如 data中有list: [1,2], obj: {cc: 1}这两个key, 如果想要渲染完成后动态增加属性还要实时更新视图，那么就要使用this.$set(this.list, 0, 100) 这样就可以list中第一个元素增加100的值而且可实时渲染到视图层，对象也是类似的操作，那么它的原理是怎么样的呢？

set源码

• set定义有两个地方
  • Vue.set() 在 /src/core/global-api/index.js
    
  • vm.$set在 /src/core/instance/index中的stateMixin函数里调用 在/src/core/instance/state.js中被定义
    
  • 综上我们看到 不过是我们vue的静态方法vue.set 还是 实例方法vm.$set 都是被赋值了一个set函数，而通过查看源码我们可以看到 他们被赋值的set函数是同一个函数
  • /src/core/observer/index.js

  $delete源码

  • $delete是为了防止删除对象或者数组中某个元素之后视图没有更新而产生的方法，其作用跟 $ set非常相似， $ set是增加元素，而它是删除元素，其定义的位置也跟set在一起定义的