vue_defineProperty.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>hello</div>
    <div>world</div>
    <p>xixihaha</p>
    <script>
        function observe(obj) {
            // 判断类型
            if (!obj || typeof obj !== 'object') {
                return
            }
            Object.keys(obj).forEach(key => {
                defineReactive(obj, key, obj[key])
            })
        }

        // 通过 Dep 解耦属性的依赖和更新操作
        class Dep {
            constructor() {
                //console.log(this,'this')
                this.subs = []
            }
            // 添加依赖
            addSub(sub) {
                this.subs.push(sub)
            }
            // 更新
            notify() {
                this.subs.forEach(sub => {
                    sub.update()
                })
            }
        }
        // 全局属性，通过该属性配置 Watcher
        Dep.target = null;

        class Watcher {
            constructor(obj, key, cb) {
                // 将 Dep.target 指向自己
                // 然后触发属性的 getter 添加监听
                // 最后将 Dep.target 置空
                Dep.target = this
                this.cb = cb
                this.obj = obj
                this.key = key
                this.value = obj[key]
                Dep.target = null
            }
            update() {
                // 获得新值
                this.value = this.obj[this.key]
                // 调用 update 方法更新 Dom
                this.cb(this.value)
            }
        }

        function defineReactive(obj, key, val) {
            // 递归子属性
            observe(val)
            let dp = new Dep()
            Object.defineProperty(obj, key, {
                enumerable: true,
                configurable: true,
                get: function reactiveGetter() {
                    console.log('get value')
                    // 将 Watcher 添加到订阅
                    if (Dep.target) {
                        dp.addSub(Dep.target)
                    }
                    return val
                },
                set: function reactiveSetter(newVal) {
                    console.log('change value')
                    val = newVal
                    // 执行 watcher 的 update 方法
                    dp.notify()
                }
            })
        }


        var data = { name: 'yck' }
        observe(data)
        function update(value) {
            document.querySelector('p').innerText = value
        }
        // 模拟解析到 `{{name}}` 触发的操作
        new Watcher(data, 'name', update)
        // update Dom innerText
        data.name = 'yyy'

    </script>
</body>

</html>