3-2-09-Vue.js 源码阅读-首次渲染过程-调试

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue 首次渲染的过程-调试

初始化完成之后，本节，通过调试的方式查看 Vue 首次渲染的整个过程。

Vue 实例的时候会调用 _init() 这个方法，在这个方法里面会通过调用 $mount() 方法完成 Vue 的首次渲染。

$mount 方法的执行过程：

  1. 获取模板：

  • 首先判断 options 中是否有 render 函数

  • 如果没有 render 函数，获取 options.template ，如果是一个元素节点，直接返回 innerHTML 作为模板；

  • 如果存在并且是一个字符串，判断字符串的第一个字符是否是一个 # 号，如果是，作为 id 选择器获取对应元素的 innerHTML 作为模板。

  • 如果 options 中没有设置模板，判断是否有 el ，如果有获取 el 的 outerHTML 作为模板。

  1. 编译模板：

  • 调用 compileToFunction() 这个函数将模板转换成 render 函数。

  • 在最后执行 mount 方法（在 runtime/index.js中定义的 $mount）。

  • 在 mount 方法中调用了 mountComponent() 这个方法。

    • mountComponent 中首先判断 options 中是否有 render 函数，如果没有 render 判断如果是生产环境发出警告。

    • 通过调用 callhook 调用了一个 Vue 生命周期中的钩子函数 beforeMount。

    • 然后声明 updateComponent 这个函数，在这个函数里面会调用 _update 这个方法，在这个方法中调用 render 函数将 render 函数中返回的虚拟 DOM 返回给 _update ,在 _update 这个方法中把虚拟 DOM 渲染成 真实 DOM，最后更新到页面上。

    • 最后 callback 调用 Vue 声明周期中的钩子函数 mounted。

到现在为止，上述的 updateComponent 方法只是定义了并没有调用，它的调用是在 new Watcher 的时候调用的。

以上是 3-2-09-Vue.js 源码阅读-首次渲染过程-调试 的全部内容， 来源链接： utcz.com/z/375978.html

回到顶部