Vue的响应式浅析
2020-10-31 本文已影响0人
lin_lilili
1 Vue如何实现响应式?
- Vue的响应式是建立在监听data中的数据.
2 在Vue2中响应式的实现
- Vue通过Object.defineProperty()来实现对数据的代理和监听
- 将数据声明在data中,Vue会将数据进行封装
- 给data中的数据添加getting,setting方法.
- 在Vue发现数据发生变化,进行render(数据)
3 Vue响应式中有特殊的情况.
3.1 对象
- 对象可以将所有的属性提前声明.
- 但是,对象有时候无法将所有的属性进行提前声明.
- 需要动态的添加新的属性,这时候就需要Vue.set或者this.$set来动态绑定.
- 实际上set API调用的也是Object.defineProperty()来实现.
3.2 数组.
- 数组无法将未来添加的数据,进行提前声明.
- 又无法用set API来监听.
- 尤雨溪使用增加原型链的方式,继承数组原型.
- 在原有的基础上重写了7个数组的API
pop,push,shift,unshift,reverse,sort,splice
- 帮助数组中的数据动态的代理和监听.