vue2.0源码解析自用

   添加顺序是先子后父,所以对于同步渲染的子组件而言,mounted 钩子函数的执行顺序也是先子后父。
        new Vue({
            1.初始化 init()
            2.挂载 $mount()
            3.编译 compile()
             4.render()
             5.vnode
            6.patch()
            7.DOM
        })
        function init(){
            1.合并配置 mergerOptions()
            2.renderProxy 对渲染函数进行作用域代理
            3.initLifeCycle 初始化生命周期
            4.initEvents
            5.initRender
            6.调用beforeCreate
            7.initInjections
            8.initState   初始化props methods data computed watcher
            9.initProvide
            10.调用created
            11.$mount
        }
        function $mount(){
            1.有无render,没有的话讲template转化为render
            2.mountComponent
            3.实例化Watcher
            4.调用beforeMount
            5._render  
        }
        function _render(){
            1.通过createElement返回vNode
            2.通过update将vNode更新为真实node 利用patch方法遍历父元素的children再最后一起insert,
            3.调用mounted
        }
        new Watcher({
            1.调用beforeUpdate
            2.调用updated
        })

        1.组件的更新由父到子;因为父组件的创建过程是先于子的,所以 watcher 的创建也是先父后子,执行顺序也应该保持先父后子
    双向绑定原理
    props初始化
    props 的初始化主要过程,就是遍历定义的 props 配置。
    遍历的过程主要做两件事情:一个是调用 defineReactive 方法把每个 prop 对应的值变成响应式,可以通过 vm._props.xxx 访问到定义 props 中对应的属性。
    对于 defineReactive 方法,我们稍后会介绍;另一个是通过 proxy 把 vm._props.xxx 的访问代理到 vm.xxx 上。
    props初始化
    data 的初始化主要过程也是做两件事,一个是对定义 data 函数返回对象的遍历,通过 proxy 把每一个值 vm._data.xxx 都代理到 vm.xxx 上;
    另一个是调用 observe 方法观测整个 data 的变化,把 data 也变成响应式,可以通过 vm._data.xxx 访问到定义 data 返回函数中对应的属性。

    proxy
    Proxy就是通过Object.defineProperty把this.props.XXX和this.data.XXX代理到this.XXX上。

    Observe
    1.实例化Def
    2.将自身实例添加到数据对象的__ob__上
    3.判断是对象还是数组,对象调用defineReactive方法,数组调用observeArray

    defineReactive
    实例化Dep
    通过Object.defineProperty 去给 obj 的属性 key 添加 getter 和 setter
    在 get 函数中通过 dep.depend 做依赖收集
    在 set 函数中通过 dep.notify 做派发更新

你可能感兴趣的:(vue2.0源码解析自用)