携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第9天,点击查看活动详情
喜欢就点个赞吧🎈😊
🎉 前言
这篇文章主要是针对源码的探求,将Vue中如何利用Object.denfineProperty来进行封装的这一部分内容。有助于我们提高对于源码的分析能力。
我们首先要知道的原理就是Object.denfineProperty提供的get和set方法,当我们获取数据时就会调用get,当我们修改数据时就是触发set。
理解的难点就是要明白如何循环调用实现逐层递归的操作。
🎉 第一步需要封装Object.denfineProperty
为什么呢?这是因为在获取数据或者是改变数据的时候,get函数只是提供一个return的值,咱么还需要通过另外的一个变量来进行存储,但是在二次封装的时候,我们利用闭包的来扩展参数的使用。
🎉 第二步需要循环递归所有的对象属性是具有这个Object.denfineProperty
这是整个数据响应最重要的一步,因为传入的数据不可能只有一层,所以要将对象中所有的属性都要进行这个Object.denfineProperty的绑定,实现动态数据的展示。 先将原理进行介绍: 这里的各个函数之间的是循环调用实现递归的并不是说自己调用自己。首先Observer是实现每个层级响应式的关键,并且是能够被侦测到的,但是在循环层级之前要先判断一下这个属性身上有没有__ob__(这只是一个规定好的属性,是实例化产生的,写成这样是因为要表明它是一个私有的属性)这个Observer的实例,然后再去new Observer()实例,然后在调用包装好的Object.denfineProperty。在循环调用observe函数,进行递归循环。
🎉 第三步需要处理数组使之也能进行数据的响应式
在Vue2中采用的是改进数组的七个方法,只有数组操作过程中使用这七个方法才能实现数据的响应。 这里边有两个知识点比较重要:
- 第一个就是要将数组原型上的方法进行保存,利利用arrayMethods将数组原型对象上的方法进行复制。
- 第二个是通过Object.setPrototypeOf强行设置二次封装的方法的原型对象。
🎉 总结
我们将在2中介绍Vue数据响应原理的依赖收集的Dep类和Watcher类。