手摸手教你实现一个简单vue(1)响应式原理
作者:互联网
写在前面
1202年了,再实现一款mvvm框架有咩用啊?其实...确实....没咩用。你写的再好也难卷的过已经相当成熟的vue,react等等框架,但是对个人而言,自己实现一个简单版vue一定会加深你对源码的原理的理解,这么看来还是有点意义的。
最终版效果:
实现功能:
- 声明式渲染 {{message}}
- 条件渲染 v-if
- 列表渲染 v-for
- 事件处理 v-on
- 组件渲染 <component></component>
框架特点: - 使用typescript+webpack构建
- 框架直接操作真实dom而没有用到vdom
- 只实现了vue的部分功能,因为事无巨细全部实现的话有点搬砖。
- 不像vue2.x的缺陷,moush-vue内数组可通过下标索引完成视图更新
关于没有vdom:
这也是vue1.x和2.x的区别,但没有vdom也完全不影响你理解vue原理,因为理解了1.x的原理,2.x无非就是在原来的基础上增加了vdom和相关的diff算法而已。
演示:
template:
<div id="app">
<div class="ageContent">
<p>
{{name}}的年龄是{{age}}
</p>
<ul>
<li v-for="item in arr">
{{item}}
</li>
</ul>
<button v-on:click="addFunc">addFunc</button>
<coma v-if="isShow"></coma>
</div>
typescript:
const app = new moushVue({
el: "#app",
data: function () {
return {
age: 1,
name: "小明",
isShow: true,
arr:[1,2,3,4,5,6,7,8,9,10,11],
};
},
methods:{
addFunc:function(){
this.arr[0]++
},
switchIsShow:function(){
this.isShow=!this.isShow
}
},
components: {
coma: {
template: `<h1 class="com" v-bind:test="appName">局部组件{{appName}}自身属性:{{appAttr}}</h1>`,
data: function () {
return {
appName: "moush",
appAttr:"attr",
};
},
},
},
});
点击addFunc按钮 列表中·1会++,浏览器视图也会相应更新
项目的地址:
https://github.com/moushicheng/moush-vue
骗个star不过分吧
主流程
class moushVue implements VM{
$options: any;
$data: any;
$el: HTMLElement;
$parentVm: VM;
$childrenVm: VM[];
$methods:any
$oldNode:any;
constructor(options: OPTIONS) {
this.$options = options;
this.init();
this.mount();
this.observe();
}
protected init() {
new init(this);
}
protected mount() {
this.$options.beforeMount.call(this);
this.$el =
typeof this.$options.el == "string"
? document.querySelector(this.$options.el)
: this.$options.el;
this.$options.mounted.call(this);
}
protected observe() {
new Observer('$data',this.$data,this); //使data内部数据可观测
new Complier(this); //分析el内部节点并生成相应watcher
}
}
我们先不用在意函数细节做了什么,笼统认知一下,且看constructor内部分别干了三件事:
this.init();初始化一些数据
this.mount(); 将用户传进来的el挂载
this.observe(); 将数据变的可观测并执行编译
前两者比较简单,我们的核心就是搞懂observe中
new Observer('$data',this.$data,this); //使data内部数据可观测
new Complier(this); //分析el内部节点并生成相应watcher
到底干了什么
响应式原理
要监控一个对象(这里把Array和Object都称为对象)内部的数据变化,我们就不得不用到一些手段,vue2.x用到了Object.defineProperty这个api来实现监控数据,但我们的框架并不是这样,因为这样做无法监控
arr[0]=1;
数组下标索引带来的变化。
在我们的框架中,用到了es6的Proxy代理对象来监控对象变化
下面你可以尝试一下把这段代码复制到浏览器控制台,然后进行一些简单的调试体验一下Proxy
const obj={a:1}
const proxy = new Proxy(obj, {
get(obj, property) {
console.log('@get:'+property)
return obj[property];
},
set(obj, property, value) {
console.log('@set:'+property+value)
obj[property] = value;
return true;
},
});
//调试
proxy.a=2 //@set:a2
proxy.a //@get:a
那么要对vue中data选项进行数据监控怎么做呢?那当然如出一辙用到Proxy,在数据更新的时候,在Proxy get中顺便通知依赖更新就行了
那么什么又是依赖呢?这个不太好解释,笼统的讲就是跟数据直接相关的HTML模板
如:
<div>
{{message}}
</div>
new moushVue({
...
data:{
message:"Hello,world"
}
...
})
清晰一点讲就是我们内部构建的Watcher对象,通知依赖更新,就是通知Watcher执行它的update方法,update方法会直接操作dom更新视图,对不同的模板会有不同的操作(不同的回调cb),这和我们主流程中Complier编译有关,它会根据HTML模板创建不同类型的cb来为数据更新进行服务:
class Watcher {
vm:VM
cb:Function;
getter:any;
value:any;
constructor (vm,initVal,expOrFn,cb) {
this.vm = vm;
this.cb = cb;
if(isType(expOrFn,'String'))this.getter = parsePath(expOrFn)
else if(isType(expOrFn,'Function'))this.getter=expOrFn
this.value = this.get() //收集依赖
this.value=initVal
}
get () {
window.target = this;
let value = this.getter(this.vm.$data)
window.target = undefined;
return value
}
update () {
const oldValue = this.value
// this.value = this.get() //更新时不要触发getter否则会收集依赖
this.value = this.getter(this.vm.$data)
this.cb.call(this.vm, this.value, oldValue)
}
}
关于get,依赖收集,我们很快就会提到。
好,那么让我们回到数据监控
Observer
observer就是一个侦测器,它会深度递归将选项data内部的所有数据都进行监控。
class Observer{
$value: any;
$parent: any;
$key:string
dep: any;
constructor(key,value, parent) {
this.$key=key;
this.$value = value;
this.$parent = parent;
this.dep = new Dep();
def(value, "__ob__", this); //相当于this.__ob__=value
this.walk(value);
this.detect(value, parent);
}
private walk(obj: Object | Array<any>) {
for (const [key, val] of Object.entries(obj)) {
if (typeof val == "object") {
//同时判断数组和对象
new ObserverNext(key,val, obj);
}
}
}
private detect(val: any, parent: any) {
const dep = this.dep
const key=this.$key
const proxy = new Proxy(val, {
get(obj, property) {
if (!obj.hasOwnProperty(property)) {
return;
}
dep.depend(property);
return obj[property];
},
set(obj, property, value) {
obj[property] = value;
dep.notify(property);
if(parent.__ob__)parent.__ob__.dep.notify(key)
return true;
},
});
parent[this.findKey(parent, val)] = proxy;
}
//通过对象和对象内的某个值发现指向这个值的键(key)
//比如obj.a=1,findKey(obj,1) =>返回a
private findKey(obj, value, compare = (a, b) => a === b) {
return Object.keys(obj).find((k) => compare(obj[k], value));
}
}
每个对象的数据监控都需要有一个dep,dep是什么?因为一个数据可能会对应多个依赖,所以必须要把数据对应的所有依赖都做一个统一管理,这个统一管理就由dep来实现。
observer的主流程,初始化,创建dep,然后walk(递归分析对象内部是否有嵌套对象,有的话就将嵌套对象也进行监控。
walk(obj: Object | Array<any>) {
for (const [key, val] of Object.entries(obj)) {
if (typeof val == "object") {
//同时判断数组和对象
new ObserverNext(key,val, obj);
}
}
}
然后是侦测detect
private detect(val: any, parent: any) {
const dep = this.dep
const key=this.$key
const proxy = new Proxy(val, {
get(obj, property) {
if (!obj.hasOwnProperty(property)) {
return;
}
dep.depend(property);
return obj[property];
},
set(obj, property, value) {
obj[property] = value;
dep.notify(property);
if(parent.__ob__)parent.__ob__.dep.notify(key)
return true;
},
});
parent[this.findKey(parent, val)] = proxy;
}
先把val(传进来的对象)进行代理(proxy),然后在get中收集依赖dep.depend
在set中通知依赖更新dep.notify,更新的时候同时会做一层穿透通知父对象也进行更新。
最后
parent[this.findKey(parent, val)] = proxy;
在将父对象中引用我们新侦测对象改为代理器。这样便能将整个对象都变成响应式
总结一下,Observer的作用就是深度递归分析对象内部的所有数据,并进行侦测,在内部数据更新时通知代理器使dep更新,在获取内部数据的时候就会通知代理器使dep进行依赖收集。
dep
接下来让我们分析一下dep,因为源码很简单,所以直接上源码
class depNext {
subs: Map<string, Array<Watcher>>;
constructor() {
this.subs = new Map();
}
addSub(prop, target) {
const sub = this.subs.get(prop);
if (!sub) {
this.subs.set(prop, [target]);
return;
}
sub.push(target);
}
// 添加一个依赖
depend(prop) {
if (window.target) {
this.addSub(prop, window.target); //不要奇怪window.target后续会讲
}
}
// 通知所有依赖更新
notify(prop) {
const watchers = this.subs.get(prop);
if(!watchers)return;
for (let i = 0, l = watchers.length; i < l; i++) {
watchers[i].update();
}
}
}
注意到subs是一个Map对象,它会映射对象内所有的数据,每个映射的数据都对应一个依赖数组。这就是上文说的一个数据可能对应多个依赖
依赖收集
依赖收集简单的来说就是,在获取数据的时候收集依赖
再次贴一下Observer中的源码
const proxy = new Proxy(val, {
get(obj, property) {
if (!obj.hasOwnProperty(property)) {
return;
}
dep.depend(property);
return obj[property];
},
set(...){...}
});
数据获取的时候,看到了吗,dep.depend收集了依赖,然后在依赖收集器dep中,将对应的依赖添加到依赖数组中
dep中是这么收集的
this.addSub(prop, window.target);
window.target实际上就是watcher的实例,在创建watcher的时候,watcher会把自己赋予到全局window.target中,然后去获取一下数据,数据代理器(Proxy)就会dep.depend,收集这个watcher了。
watcher中依赖收集
get () {
window.target = this;
let value = this.getter(this.vm.$data)
window.target = undefined;
return value
}
this.getter在构造器中被parsePath所创建,parsePath会把一个形如'data.a.b.c'的字符串路径所表示的值,从真实的data对象中取出来,这样就完成了依赖收集
/**
* Parse simple path.
* 把一个形如'data.a.b.c'的字符串路径所表示的值,从真实的data对象中取出来
* 例如:
* data = {a:{b:{c:2}}}
* parsePath('a.b.c')(data) // 2
*/
export function parsePath(path) {
const bailRE = /[^\w.$]/;
const segments = path.split(".");
return function (obj) {
for (let i = 0; i < segments.length; i++) {
if (!obj) return;
if (bailRE.test(segments[i])) {
//this.arr[0] this[arr[0]]
const match = segments[i].match(/(\w+)\[(.+)\]/);
obj = obj[match[1]];
obj = obj[match[2]];
continue;
}
obj = obj[segments[i]];
}
return obj;
};
}
总结
Observer深度递归分析选项data内部的数据,使其具有响应性。
observer实例内部的dep负责统一管理依赖,
在获取数据时,dep会收集依赖,在数据更新时,dep会通知依赖更新
而依赖就是watcher,它负责具体的更新视图,通过调用其上的cb(回调函数)。
watcher更新视图所调用的cb都在Complier编译构建时决定,这一点会在后续的文章中讲解。
想具体了解上述过程可以点击,直接看项目源码
https://github.com/moushicheng/moush-vue
归档
# 手摸手教你实现一个简单vue(1)响应式原理
# 手摸手教你实现一个简单vue(2)上手编写observer
# 手摸手教你实现一个简单vue(3)上手编写dep和watcher
标签:vue,obj,dep,value,property,return,手教,手摸,data 来源: https://www.cnblogs.com/moushicheng/p/15861226.html