解析vue中的$mount

大佬教程收集整理的这篇文章主要介绍了解析vue中的$mount，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

本文主要是带领大家分析$mount。

$mount所做的工作从大体来讲主要分为3步：

1.如果你的option里面没有 render 函数，那么，通过 compileToFunctions 将HTML模板编译成可以生成VNode的Render函数。

2.new 一个 Watcher 实例，触发 updateComponent 方法。

3.生成vnode，经过patch，把vnode更新到dom上。 由于篇幅有限，这里先说前两步，第三步下篇说。 好，下面具体的说。首先，我们来到 $mount 函数，如下图：

我们呢可以看到，代码首先判断option里面有没有render函数，没有的话，进一步判断有没有template，没有的话就用dom元素的outerHTML。得到template以后干什么了呢？如下图。

我们可以看到，调用了 compileToFunctions 将template转成render函数。这里面有两个过程：

• 将template解析成ast语法树。
• 通过ast语法树生成render函数。

具体的将template解析成ast语法树在本文就不说了，有时间单独开一个章节分析。好，这下我们拿到render函数了，那么接下来一步干什么了呢？没错，就开始 mountComponent 了。如下图：

可以从上图看到，程序声明了一个 updateComponent 方法，这个是将要被 Watcher 实例调用的更新组件的方法，过一会分析到 Watcher 的时候将会看到。至于为什么会有个判断语句来根据条件声明 updateComponent 方法，其实从 perfoRMANce 可以看出，其中一个方法是用来测试 render 和 update 性能的。好我们终于该到 Watcher 了，先看这句代码：

大佬总结

以上是大佬教程为你收集整理的解析vue中的$mount全部内容，希望文章能够帮你解决解析vue中的$mount所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。