vue 响应式源码分析

概念

响应式是一种面向数据流和变化传播的编程范式。

原理

1.在 newVue() 后， Vue 会调用 _init 函数进行初始化，也就是init 过程，在 这个过程Data通过Observer转换成了getter/setter的形式，来对数据追踪变化，当被设置的对象被读取的时候会执行 getter 函数，而在当被赋值的时候会执行 setter函数。

2.当render function 执行的时候，因为会读取所需对象的值，所以会触发getter函数从而将Watcher添加到依赖中进行依赖收集。

3.在修改对象的值的时候，会触发对应的 setter， setter通知之前依赖收集得到的 Dep 中的每一个 Watcher，告诉它们自己的值改变了，需要重新渲染视图。这时候这些 Watcher就会开始调用 update 来更新视图。

代码范例

        let x
        let active
        
        let onXChange = cb => {
            active = cb
            active()
        }

        class Dep {
            constructor() {
                this.deps = new Set()
            }
            depend () {
                if(active) {
                    this.deps.add(active)
                }
            }
            notify(){
                this.deps.forEach(dep => dep())
            }
        }

        let ref = initValue => {
            let value = initValue
            const dep = new Dep()

            return Object.defineProperty({},'value',{
                get: function() {
                    dep.depend()
                    return value
                },
                set: function (newValue) {
                    value = newValue
                    dep.notify()
                }
            })
        }

        x=ref(1)

        onXChange(() => {
            console.log(x.value * 100 + 100);
        })

        x.value = 2
        x.value = 3