手摸手教你实现一个简单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",
};
},
},
},
});
[图片上传失败...(image-6ac2ac-1638493300126)]
点击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
