[VueJs基础]-理解Vue的工作原理。

1. Vue的基本原理？ Vue实例创建的时候，Vue会先遍历data中的属性（侦测数据），使用Object.defineProperty()将它们转为getter/setter并且在内部追踪相关的依赖，在属性访问和修改时通知变化。每个组件实例都有相应的watcher,它会在组件渲染的过程中把属性记录为依赖，之后当依赖被setter调用时，通知watcher重新计算，从而使关联的组件更新。

// 代码实现
function observe(obj){
    if(!obj || typeof obj !== 'object'){
        return
    }
    Object.keys(obj).forEach(t=>{
        defineReactive(obj,t,obj[t])
    })
    function defineReactive(obj,key,value){
        // 递归子属性
        observe(value)
        Object.defineProperty(obj,key{
            // 可枚举
            enumerable:true,
            // 数据可配置
            configurable:true,
            get:function(){
                return value
            },
            set:function(newValue){
                // 如果数据是一个对象 递归子属性
                observe(newValue)
                if(newValue !== value){
                    render()
                    value = newValue
                }
            }
        })
    }
}

[原理图]

2. 双向绑定原理? Vue采用数据劫持结合订阅者-发布者的方式，通过Object.defineProperty()来劫持各个属性的getter和setter,在数据变动时发消息给订阅者，触发相应的回调。