/*

    自己写的代码, 实现vue的双向绑定和依赖收集

    场景: 多个子组件用到父组件data中的数据, 当父组件data中的此数据发生改变时,

    所有依赖它的 子组件全部更新

    通常子组件的从父组件中拿取的数据不允许发生改变

*/

    //订阅者 Dep

    //一个订阅者只管理一个数据

    class Dep {

        constructor () {

            this.subs = []    //存放vue组件

        }

        addSubs (sub) {

            this.subs.push(sub)

            console.log('add watcher: ', sub._name)

        }

        notify () {

            this.subs.forEach( sub => {    //通知vue组件更新

                sub.update()

            })

        }

    }

    //监听者

    //一个vue实例包含一个Watcher实例

    class Watcher {

        // 在实例化Watcher时, 将Dep的target指向此实例, 在依赖收集中使用

        // 因为依赖收集是在组件初始化时触发的, 而数据变更后视图相应变更是在初始化后

        // 所以让Dep.target指向此实例, 当此vue实例初始化完成后, 再指向下一个正在初始化的vue实例完成依赖收集

        constructor (name) {

            Dep.target = this

            this._name = name

        }

        update () {

            // 这里模拟视图更新

            // 其实还应该让子组件的props相应值与父组件更新的数据同步

            console.log("子组件视图更新了..." + this._name)

        }

    }

    //对data中的数据设置读写监听, 并且创建订阅者, 用于收集子组件的依赖和发布

    function defineReactive (obj, key, value) {

        // 对vue实例中data对象的每一个属性都 设置一个订阅者Dep

        let dep = new Dep()

        // 第二个vue实例的监听 覆盖了第一个vue实例的监听, 因为引用的obj是同一个

        Object.defineProperty(obj, key, {

            configurable: true,

            enumerable: true,

            get () {

            // 在读此属性时, 将当前 watcher 对象收集到此属性的 dep 对象中

            // 在实例化vue时将Dep.target指向当前Watcher

            // get()依赖收集的时候是vue组件初始化的时候, set()是在初始化后

                if (dep.subs.indexOf(Dep.target) === -) {

                    dep.addSubs(Dep.target)

                }

                //return obj[key]     此写法报错 提示栈溢出 原因是无限调用get()

                return value

            },

            set (newVal) {    // 此属性改变时, 通知所有视图更新

                if (newVal !== value) {

                    value = newVal

                    dep.notify()

                }

            }

        })

    }

    //接收一个对象作为参数, 将该对象的所有属性调用defineReactive设置读写监听

    function observer (obj) {

        if (!obj || (typeof obj !== 'object')) {

            return

        }

        Object.keys(obj).forEach( key => {

            defineReactive(obj, key, obj[key])

        })

    }

    // 构造函数, 监听 配置options中的data()方法返回的对象的所有属性 的读写

    class Vue {

        constructor (options) {

            this._name = options.name

            this._data = options.data

            // 每个vue组件都是一个vue实例, 在一个页面中有多个vue实例

            // 在初始化该vue实例时, new一个Watcher对象, 使Dep.target指向此实例

            new Watcher(options.name)

            // 给data中的数据挂载读写监听

            observer(this._data)

            //模拟vue解析template过程, 获取从父组件传递过来的props

            //在这里进行依赖收集

            this._props = options.props ? getProps() : {}

            // 实例化该组件的子组件

            this._children = options.render ? (options.render() || {}) : {}

        }

    }

    // 父组件数据

    let data = {

        first: "hello",

        second: 'world',

        third: ['啦啦啦']

    }

    let times =

    // 第一次调用返回的是第一个子组件的从父组件继承的数据(vue中props属性的值)

    // 第二次调用返回的是第二个子组件的从父组件继承的数据(vue中props属性的值)

    function getProps () {

        times++

        if (times == ) {

            let obj = {first: "", second: ""}

            Object.keys(obj).forEach( key => {

                // 如果是对象, 则进行深拷贝

                // 这里使用到了父组件的数据, 触发依赖收集

                if (data[key] instanceof Object) {

                    obj[key] = JSON.parse(JSON.stringify(data[key]))

                } else {

                    obj[key] = data[key]

                }

            })

            return obj

        } else if (times == ) {

            let obj = {first: "", third: ""}

            Object.keys(obj).forEach( key => {

                if (data[key] instanceof Object) {

                    obj[key] = JSON.parse(JSON.stringify(data[key]))

                } else {

                    obj[key] = data[key]

                }

            })

            return obj

        }

    }

     let vue_root = new Vue({

         name: 'vue_root',

         data,

         //模拟编译template和实例化vue的过程

         //在编译父组件 并且传递参数给子组件时, 将子组件的 watcher 添加进父组件的 dep

         render () {

             let vue_1 = new Vue({

                 name: 'vue_1',

                 data: {},

                 props: true,

                 render () {}

             })

             let vue_2 = new Vue({

                 name: 'vue_2',

                 data: {},

                 props: true,

                 render () {}

             })

             return {

                 vue_1,

                 vue_2

             }

         }

     })

    console.log(vue_root)

     vue_root._data.first = 'hello hello'    // vue_1 和 Vue_2 都依赖此数据, 都更新

     vue_root._data.third =  "aaa"            // 只有 vue_2 依赖到了此数据, 更新