vue2.x 对象劫持的原理实现

2023-07-26 23:41:04 69

目标：手写迷你版Vue

一：使用rollup打包,打包后的代码体积更小，更适合写框架源码的打包

npmirollup-D

二：安装babel相关的包，以及实现静态服务，设置环境变量的包

npmi@babel/core@babel/preset-envrollup-plugin-babelroullup-plugin-servecross-env-D

三：包的相关介绍

rollup(打包工具)
@babel/core(用babel核心模块)
@babel/preset-env（babel将高级语法转成低级语法）
rollup-plugin-serve(实现静态服务)
cross-env(设置环境变量)
rollup-plugin-babel(桥梁)

四：根目录书写rollup.config.js

importbabelfrom'rollup-plugin-babel';
importservefrom'rollup-plugin-serve';
exportdefault{
input:'./src/index.js',//以哪个文件作为打包的入口
output:{
file:'dist/umd/vue.js',//出口路径
name:'Vue',//指定打包后全局变量的名字
format:'umd',//统一模块规范
sourcemap:true,//es6->es5开启源码调试可以找到源代码的报错位置
},
plugins:[//使用的插件
babel({
exclude:"node_modules/**"
}),
process.env.ENV==='development'?serve({
open:true,
openPage:'/public/index.html',//默认打开html的路径
port:3000,
contentBase:''
}):null
]
}

配置package.josn

{
"name":"vue_souce",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts":{
"build:dev":"rollup-c",
"serve":"cross-envENV=developmentrollup-c-w"
},
"keywords":[],
"author":"",
"license":"ISC",
"devDependencies":{
"@babel/core":"^7.9.0",
"@babel/preset-env":"^7.9.5",
"cross-env":"^7.0.2",
"rollup":"^2.6.1",
"rollup-plugin-babel":"^4.4.0",
"rollup-plugin-serve":"^1.0.1"
}
}

五：新建index.html(public/index.html)






Document

六：编写Vue入口：index.js

//Vue的核心代码只是Vue的一个声明
import{initMixin}from'./init';
functionVue(options){
//进行Vue的初始化操作
this._init(options);

}
//通过引入文件的方式给Vue原型上添加方法
initMixin(Vue);//给Vue原型上添加一个_init方法
exportdefaultVue

七：编写初始化操作init.js

import{initState}from'./state'
//在原型上添加一个init方法
exportfunctioninitMixin(Vue){
//初始化流程
Vue.prototype._init=function(options){
//数据的劫持
constvm=this;//vue中使用this.$options指代的就是用户传递的属性
vm.$options=options;

//初始化状态
initState(vm);//分割代码
}
}

八：初始化数据

import{observe}from'./observer/index.js'
exportfunctioninitState(vm){
constopts=vm.$options;
//vue的数据来源属性方法数据计算属性watch
if(opts.props){
initProps(vm);
}
if(opts.methods){
initMethod(vm);
}
if(opts.data){
initData(vm);
}
if(opts.computed){
initComputed(vm);
}
if(opts.watch){
initWatch(vm);
}
}
functioninitProps(){}
functioninitMethod(){}
functioninitData(vm){
//数据初始化工作
letdata=vm.$options.data;//用户传递的data
data=vm._data=typeofdata==='function'?data.call(vm):data;
//对象劫持用户改变了数据我希望可以得到通知=》刷新页面
//MVVM模式数据变化可以驱动视图变化
//Object.defineProperty()给属性增加get方法和set方法
observe(data);//响应式原理
}
functioninitComputed(){}
functioninitWatch(){}

九：书写核心监听功能

//把data中的数据都使用Object.defineProperty重新定义es5
//Object.defineProperty不能兼容ie8及以下vue2无法兼容ie8版本
import{
isObject
}from'../util/index'
//后续我可以知道它是不是一个已经观察了的数据__ob__
classObserver{
constructor(value){//仅仅是初始化的操作
//vue如果数据的层次过多需要递归的去解析对象中的属性，依次增加set和get方法
//对数组监控
this.walk(value);//对对象进行观测
}
walk(data){
letkeys=Object.keys(data);//[name,age,address]

//如果这个data不可配置直接return
keys.forEach((key)=>{
defineReactive(data,key,data[key]);
})
}
}
functiondefineReactive(data,key,value){
observe(value);//递归实现深度检测
Object.defineProperty(data,key,{
configurable:true,
enumerable:false,
get(){//获取值的时候做一些操作
returnvalue;
},
set(newValue){//也可以做一些操作
if(newValue===value)return;
observe(newValue);//继续劫持用户设置的值，因为有可能用户设置的值是一个对象
value=newValue;
}
});
}

exportfunctionobserve(data){
letisObj=isObject(data);
if(!isObj){
return
}
returnnewObserver(data);//用来观测数据
}

十：编写工具类文件，存放校验对象

/**
*
*@param{*}data当前数据是不是对象
*/
exportfunctionisObject(data){
returntypeofdata==='object'&&data!==null;
}

总结：

1创建Vue构造函数,接收所有所有参数options
2分类初始化options,本章主要处理data，让data上的引用类型的数据通过Object.definePrototy变成响应式的，初始化是有循序的，先初始化props然后初始化method然后初始化datacomputedwatch

3核心如下

functiondefineReactive(data,key,value){
observe(value);//递归实现深度检测
Object.defineProperty(data,key,{
configurable:true,
enumerable:false,
get(){//获取值的时候做一些操作
returnvalue;
},
set(newValue){//也可以做一些操作
if(newValue===value)return;
observe(newValue);//继续劫持用户设置的值，因为有可能用户设置的值是一个对象
value=newValue;
}
});
}

到此这篇关于vue2.x对象劫持的原理实现的文章就介绍到这了,更多相关vue2.x对象劫持内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

vue2.x 对象劫持的原理实现

热门推荐

随机推荐