无所事事的样子开始了摸鱼的一天
VUE首次渲染过程
先初始化 VUE 调用
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
再去调用 initGlobalAPI 初始化全局挂载的API
然后声明一些VUE.config配置函数 声明一些与平台相关的组件和方法,在VUE原型上挂载__patch__ 和$mount 方法
然后调用 this._init()完成初始化的一系列操作
设置_isVue的参数表示如果是Vue实例则不需要被observe 响应式处理
判断当前Vue实例是否为组件,如果是组件则合并options选项
不是则,将options 与用户传过来的options合并
设置渲染的代理对象
initProxy
判断当前环境是否支持Proxy对象,如果不支持则返回当前实例,支持则将渲染时的代理对象vm._renderProxy = new Proxy(vm,handlers)
然后执行一些init函数挂载一些生命周期、事件监听等函数
调用$mount 将模板文件编译为render函数
获取当前实例的options,判断有没有render函数,如果没有则判断是否有模板存在,即options.template是否存在,如果存在则判断是否为字符串(判断第一位是否为'#',是则为DOM的id选择器,ps:看源码好像不会处理非id选择器的样子)
调用idToTemplate获取dom元素,返回dom元素的innerHTML,将其作为模板
或者是元素(是否含有nodeType,有则是页面标签元素直接返回innerHtml
),
如果没有template则判断是否有el ,将判断el的outerHTML是否存在,存在则直接使用,如果不存在则当前的el可能是文本节点或者是注释节点,创建一个div将el放入,然后返回
然后调用compileToFunctions 将template字符串 转换成render函数 然后调用mount.call 进行重写调用,然后调用mountComponent 调用钩子函数 beforeMount 定义 updateComponent 调用 渲染Watcher
// 定义各项属性
// lazy属性 是否延迟执行,首次渲染立即更新,则是false,如果是计算属性则是true 计算后才渲染更新
if (options) {
this.deep = !!options.deep
this.user = !!options.user
this.lazy = !!options.lazy
this.sync = !!options.sync
this.before = options.before
} else {
this.deep = this.user = this.lazy = this.sync = false
}
...
this.value = this.lazy
? undefined
: this.get()
首次渲染就进入了 get这个方法
...
get方法内调用
this.getter.call(vm, vm)
然后调用 updateComponent 的方法内的 _update() 与 _render() 方法 执行完成后 视图就会渲染到页面上了
调用钩子函数mounted
—————————————————————————————————————————————————————— 我这废柴