vue数据劫持是什么意思,vue3数据劫持
本文主要介绍一个手写Vue2.0的数据劫持的例子，帮助你更好的理解和学习使用Vue框架。感兴趣的朋友可以了解一下。
目录
一：构建webpack
二：数据劫持
三。摘要
一：搭建webpack
只需设置webpack的配置。创建一个新文件夹，然后初始化它。然后新建一个webpack.config.js文件，这是webpack的配置文件。安装简单的依赖项。
npm安装web pack web pack-CLI web pack-dev-server-D
在与导出文件和导入文件相同级别的目录中创建新的public/index.html和src/index.js。
j只需在webpack.config.js文件中配置webpack:
const path=require( path )；
const HtmlWebpackPlugin=require( html-web pack-plugin )；
模块.导出={
条目：。/src/index.js ，
输出：{
文件名： bundle.js ，
path: path.resolve(__dirname， dist )
},
解决：{
模块：[
path . resolve(_ _目录名，)，path . resolve(_ _目录名，节点模块)
]
},
插件：[
新建HtmlWebpackPlugin({
模板：path.resolve(__dirname， public/index.html )
})
]
}
好了，基本配置好webpack就可以进入正题了。
二：数据劫持
在v2中，vue的实例化是通过new Vue(el，options)来完成的。我们需要创建一个新的vue文件，将数据劫持的方法统一到vue中。
创建一个新的vue/index.js作为数据劫持的入口文件。
从“”导入{initState}。/init . js ；
功能Vue(选项){
这个。_init(选项)；//数据初始化
}
vue . prototype . _ init=function(options){
var vm=期权；//保存实例。
vm。$ options=options//实例装载
initState(VM)；//实例初始化
}
创建init.js文件的新初始化实例：
初始化时要注意几个问题：
1.计算、观察和数据需要分开处理。
2.不要直接在自定义数据上修改。
3.官方将数据指定为函数是为了确保组件有自己的作用域时不会有污染。直接访问数据函数是不行的，需要自动执行。数据也可以是对象(这种情况需要考虑)。
4.这种获取数据的方式是通过vm。_data.xxx但是vue中不需要数据，所以这里需要截取重写。
5.内部引用类型需要递归。
函数initState (vm) {
var选项=vm。$ options//获取选项
if (options.data) {
initData(虚拟机)；//因为这里computed和watch都需要初始化，所以对数据进行初始化。
};
函数initData(虚拟机){
var数据=vm。$ options.data//将值重新赋给数据，而不更改用户定义的数据
数据=虚拟机。_data=typeof data===function ？data . call(VM):data { }；
for(数据中的变量键){
proxyData(vm， _data ，key)；//重新分配数据的值
};
观察(vm。_ data)；//观察数据的内部
}
创建一个新的proxy.js作为代理层：
函数代理数据(虚拟机、目标、键){
Object.defineProperty(vm，key，{
get () {
//这里做拦截：vm.xxx=vm。_data.xxx
返回虚拟机[目标][密钥]；
},
set(newValue) {
//vm.xxx=yyy===vm。_data.title=yyy
VM[target][key]=new value；
}
})
}
导出默认的proxyData
处理完访问问题后，我们现在需要递归数据的内部元素。observe(VM。_ data)；
创建新的observe.js:
功能观察(数据){
if(数据类型！==object data=null)返回；
返回新的观察者(数据)；//如果是应用类型，直接添加观察者
}
创建一个新的观察者：observer.js
函数观察者(数据){
if (Array.isArray(data)) {
//处理数组
数据。_ proto _=arrMethods
}
否则{
//处理对象
this.walks(数据)；
}
}
observer . prototype . walks=function(data){
let keys=object . keys(data)；//获取data下的所有键，还是一个数组
for(var I=0；i keys.lengthi ) {
var key=keys[I]；
var值=data[key]；
defineReactiveData(数据，键，值)；//每个重新生成的响应数据
}}
创建新的reactive.js响应类型来处理对象等。
函数defineReactiveData(数据，键，值){
观察(值)；//在子元素上递归。
Object.defineProperty(数据，键，{
get() {
返回值；
},
set (newValue) {
if (newValue===value)返回；
value=newValue//触发更改
}
}
)
};
好了，这里处理对象的数据劫持，剩下的需要用数组处理。
在《V2》中，采用了七种重写原型的方法来劫持数据。
劫持数组：
创建新的Array.js文件：
从导入{ARR_METHODS}。/config . js ；
//7个数组方法的集合
从导入observeArr。/observer arr . js ；
var originArrMethods=array . prototype，
arr methods=object . create(originArrMethods)；
ARR_METHODS.map(函数(m) {
arrMethods[m]=function () {
var args=array . prototype . slice . call(arguments)；//将类数组转换成数组
var rt=originArrMethods[m]。应用(this，args)；
var newArr
开关(m) {
案例“推送”:
大小写“ushift”:
newArr=args
外壳“拼接”:
new arr=args . slice(2)；
打破；
默认值：
打破；};
newArr观察器(new arr)；
返回rt；
}
});
导出{ arrMethods }
observer arr(new arr):数组也可能有嵌套，所以需要观察数据。
从导入观察。/观察；
函数观察器Arr (arr) {
for(var I=0；长度；i ) {
观察(arr[I])；//回去观察。
}
}
导出默认观察器arr；
三：总结
这是基本流程。不仅仅是通过object.defineProperty获取和设置数据那么简单，总结一下主要流程：
(1):在初始化期间：保存实例并挂载它。通过initState方法初始化数据，这里主要是数据，也有计算和观察要处理的。
(2):调用initdata()；重新赋值数据，然后执行数据，将用户获取的数据属性的写入方式修改为this.xxx并观察(数据)。
(3):观察(数据)时，需要对数据进行判断。如果是引用类型，就需要添加一个观察者。同时，在观察者的末端，可以判断数据是数组还是对象。对象直接再次触发object.defineProperty，同时需要内部观察。如果是数组，直接重新设置7个数组方法，然后在数组内部按照observe。
以上是手写Vue2.0数据劫持的例子细节。更多关于手写vue数据劫持的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。