100行代码理解和分析vue2.0响应式架构

function defineReactive(obj,val,cb) {
Object.defineProperty(obj,{
enumerable: true,configurable: true,get: ()=>{},set:newVal=> {
cb()
}
})
}

var demo = new Vue({
el: '#demo',data: {
text: 123,render(){
console.log("我要render了")
}
})

setTimeout(function(){
demo._data.text = 444
},3000)

第三步，

我们运行一下，他会输出

这就是 虚拟最简单虚拟

回到开始的问题，也就是说，我得知道，

就像这段代码，render 函数里其实只依赖text，并没有依赖name和age，所以，我们只要text改变的时候，我们自动触发render 函数 让它生成一个虚拟DOM就ok了（剩下的就是这个虚拟DOM和上个虚拟DOM做比对，然后操作真实DOM，只能以后再说了），那么我们正式考虑一下怎么做

第三步，

回到最上面那张图，我们知道

第一步：

然后，当执行render 函数去'touch'依赖的时候，依赖到的变量get就会被执行，然后我们就可以把这个 render 函数加到 subs 里面去了。 当我们，set 的时候 我们就执行 notify 将所有的subs数组里的函数执行，其中就包含render 的执行。 至此就完成了整个图，好我们将所有的代码展示出来

<div class="jb51code">
<pre class="brush:js;">
function VNode(tag,text: text
}
}

class Vue {
constructor(options) {
this.$options = options
this._data = options.data
Object.keys(options.data).forEach(key => this._proxy(key))
observer(options.data)
const vdom = watch(this,this._render.bind(this),this._update.bind(this))
console.log(vdom)
}
_proxy(key) {
const self = this
Object.defineProperty(self,set: function proxySetter (val) {
self._data.text = val
}
})
}
_update() {
console.log("我需要更新");
const vdom = this._render.call(this)
console.log(vdom);
}
_render() {
return this.$options.render.call(this)
}
h(tag,2) : String(val);
}
}

function observer(value,get: ()=>{
if(Dep.target){
dep.add(Dep.target)
}
return val
},set: newVal => {
if(newVal === val)
return
val = newVal
dep.notify()
}
})
}
function watch(vm,exp,cb){
Dep.target = cb
return exp()
}

class Dep {
constructor() {
this.subs = []
}
add(cb) {
this.subs.push(cb)
}
notify() {
this.subs.forEach((cb) => cb())
}
}
Dep.target = null

var demo = new Vue({
el: '#demo',[this.toString(this.text)])
])
}
})

setTimeout(function(){
demo.text = "after"
},3000)