setTimeout(() => {
            vm.msg = "张三"
            vm._updata(vm._render())
        },2000)

setTimeout(() => {
            vm.msg = "张三"
            // vm._updata(vm._render())
        },2000)

class Dep{
    constructor(){
        this.subs = []
    }
    //收集watcher
    depend(){
        this.subs.push(Dep.target)
    }
    //更新watcher
    notify(){
        this.subs.forEach(watcher =>{
            watcher.updata()
        })
    }
}

//添加watcher
Dep.target = null
export function pushTarget(watcher){
    Dep.target = watcher
}
export function popTarget(){
    Dep.target = null
}
export default Dep

//对对象中的属性进行劫持
function defineReactive(data, key, value) {
    observer(value) //深度代理
    let dep = new Dep() //给每一个对象添加dep
    Object.defineProperty(data, key, {
        get() {
            // console.log('获取')
            if(Dep.target){
                dep.depend()
            }
            console.log(dep)
            return value
        },
        set(newValue) {
            // console.log('设置')
            if (newValue == value) {
                return;
            }
            observer(newValue)
            value = newValue
            dep.notify()
        }
    })

}

//(1) 通过这个类watcher 实现更新
import { pushTarget,popTarget } from "./dep"
let id = 0
class watcher {
    //cb表示回调函数,options表示标识
    constructor(vm, updataComponent, cb, options) {
        //(1)将
        this.vm = vm
        this.exprOrfn = updataComponent
        this.cb = cb
        this.options = options
        this.id = id++
        //判断
        if (typeof updataComponent === 'function') {
            this.getter = updataComponent
        }
        //更新视图
        this.get()
    }
    //初次渲染
    get() {
        console.log(this,'||this is this')
        pushTarget(this) //给dep 添加  watcher
        this.getter()
        popTarget() //给dep 去除 watcher
    }
    //更新
    updata() {
        this.getter()
    }
}

export default watcher

//收集依赖 vue dep watcher data:{name,msg}
//dep:dep 和 data 中的属性是一一对应
//watcher:监视的数据有多少个,就对应有多少个watcher
//dep与watcher: 一对多 dep.name = [w1,w2]


//实现对象的收集依赖

import {
    patch
} from "./vnode/patch"

import watcher from "./observe/watcher"

export function mounetComponent(vm, el) {
    //源码
    callHook(vm, "beforeMounted")
    //(1)vm._render() 将 render函数变成vnode
    //(2)vm.updata()将vnode变成真实dom
    let updataComponent = () => {
        vm._updata(vm._render())
    }
    new watcher(vm, updataComponent,()=>{},true)
    callHook(vm, "mounted")
}

export function lifecycleMixin(Vue) {
    Vue.prototype._updata = function (vnode) {
        // console.log(vnode)
        let vm = this
        //两个参数 ()
        vm.$el = patch(vm.$el, vnode)
        // console.log(vm.$el, "||this is vm.$el")
    }
}

//(1) render()函数 =>vnode =>真实dom 

//生命周期调用
export function callHook(vm, hook) {
    // console.log(vm.options,"||this is vm.options")
    // console.log(hook,"||this is hook")
    // console.log(vm.$options,"||this is vm.$options")
    const handlers = vm.$options[hook]
    if (handlers) {
        for (let i = 0; i < handlers.length; i++) {
            handlers[i].call(this) //改变生命周期中的指向 
        }
    }
}