vue源码探究

• 执行顺序

1. 初始化 生命周期、事件、渲染函数 赋初值
2. 调用beforeCreate钩子
3. 初始化injection
4. 初始化状态数据
   初始化props
   初始化methods
   初始化data
   初始化compute
   初始化watch
5. 初始化 provide
6. 调用created钩子
7. 调用$mount绑定元素el
   vm.$el=el
   调用beforeMount钩子
   绑定组件更新事件
8. 调用 mounted钩子

源码：

    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }

• 响应式原理

1. 通过Object.defineProperty 定义get,set 实现响应式，get 收集添加依赖，set 通知依赖更新

2. 通过Dep保存依赖

3. 通过Watcher 监听和管理依赖 组件自带渲染Watcher，watch，computed 也会生成Watcher

4. vue 所有更新都保存到更新队列中，通过Promise或者setTimeout 异步更新，清空队列。

源码：