vue2中从源码的角度 分析Vue.$set

271 阅读1分钟

这就是vue2中的set源码 接下来给大家一行一行去解析。

但是有个前提 首先大家需要理解 vue2中普通对象是如何进行拦截的,数组是如何进行数据拦截的,这是前提。

普及:先给大家普及下vue2中普通的对象的数据劫持 是重写对象的getter,setter方法,是通过函数Object.defineProperty, 虽然数组也是对象,但是数组不是通过这个方法的,数组是通过重写数组上原型方法splice,shift,push进行劫持的。

首先判断源数据target是否是数组,且判断下标是否是有效下标。如果这个条件满足,调用target.splice方法,方法splice就是上述我给大家说的重写的数组的方法,splice会监控数据变化,进而通过dep通知渲染watcher进行渲染

如果是对象本身的属性,直接添加即可,这样会调用属性的setter方法,通过dep调用渲染watcher更新视图

如果是vue实例,或是data根节点的时候 直接报错

每个初始化过的属性都会绑定__ob__属性,为了避免多次绑定,如果不存在ob属性,表示源数据就是个普通值,直接设定返回值就好

否则直接调用方法defineReactive方法,实现新增属性的双向绑定,并且手动调用dep方法,进行视图更新