Vue $mount函数

Posted 2023-04-02

参考技术A 这里看到$mount的函数在Vue的原型链上，Vue的任何实例都可以直接调用这个方法

接下来我们来查看返回的函数mountComponent运行情况

step2:initRender(vm);

step3:initRender(vm);

step3:installComponentHooks

step4:hooksToMerge

step5:componentVNodeHooks

二、增加Vue的option el:'#app'

实现方式是：我们可以看到vm. mount函数

vue生命周期函数created与mounted执行顺序

参考技术A created
为第二个生命周期函数，在 created 中，data 和 methods 都已经被初始化好了！ 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作

mounted
为第四个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 ##mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
此时，表示vue实例已经初始化完毕了，组建已脱离创建阶段，进入运行阶段了。

执行顺序：
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。