我这废柴怎么可能逆袭的一生、第十一天

149 阅读2分钟

无所事事的样子开始了摸鱼的一天

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

—————————————————————————————————————————————————————— 我这废柴

系列