欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

手写Vue2.0 数据劫持的示例

程序员文章站 2022-09-03 18:21:15
一:搭建webpack简单的搭建一下webpack的配置。新建一个文件夹,然后init一下。之后新建一个webpack.config.js文件,这是webpack的配置文件。安装一下简单的依赖。在同级...

一:搭建webpack

简单的搭建一下webpack的配置。新建一个文件夹,然后init一下。之后新建一个webpack.config.js文件,这是webpack的配置文件。安装一下简单的依赖。

在同级目录下新建一个public/index.html和src/index.js,作为出口文件和入口文件。

j简单配置一下webpack, 在webpack.config.js文件中:

ok,基本配置好webpack就可以开始正题了。

二:数据劫持

在v2中,通过new vue(el, options)的方式,完成vue的实例化。我们需要新建一下vue文件,把数据劫持的方法统一到vue中。

新建一个vue/index.js,作为数据劫持的入口文件。

新建一个init.js文件初始化实例:

初始化的时候注意几个问题: 

1.  需要分别对computed,watch, data进行处理。

2. 不要在用户定义的data上直接修改。

3. 官方指定data为函数,是为了保证组件内部有自己的作用域不会有污染,直接访问data函数是不行的,需要自动执行。data也可以是对象(需要考虑到这个情况)

4. 这种方式获取data是通过vm._data.xxx 但是在vue中不需要data来获取,所以这里需要拦截重写。

5. 内部的引用类型需要递归

新建一个proxy.js作为代理层:

处理好了访问问题,现在需要递归一下data内部元素。obseve(vm._data);

新建一个observe.js:

新建一个观察者:observer.js

新建一个reactive.js 处理对象等响应式

ok,这里处理好了对象的数据劫持,剩余的需要处理数组了

在v2中采用重写原型上的7种方法,做到数据劫持。

劫持数组:

新建一个array.js文件:

observearr(newarr): 数组也可能有嵌套,所以需要对数据进行观察。

三:总结

 基本流程就是这样的,不仅仅是object.defineproperty对数据进行get和set这么简单。总结一下主要流程:

(1): 在初始化的时候:保存一下实例,挂载实例。通过initstate方法来初始化数据,这里主要是data数据,也有computed和watch需要处理。

(2): 调用initdata(); 重新赋值data,然后执行data,修改用户获取data属性的写法统一为this.xxx同时observe(data)

(3):在observe(data)的时候需要对data进行判断,如果是引用类型需要加上一个观察者observer,同时在观察者终判断data是为数组还是对象,对象直接重新触发object.defineproperty,同时对内部重新observe。如果是数组直接重新7种数组方法,然后对数组内部接着observe。

以上就是手写vue2.0 数据劫持的示例的详细内容,更多关于手写vue 数据劫持的资料请关注其它相关文章!

相关标签: vue 数据劫持