[vue] vue实例挂载的过程是什么?
Activity
wenyejie commentedon Jun 17, 2019
radio-qq commentedon Jan 4, 2021
https://www.jianshu.com/p/7508d2a114d3
Cai-zhiji commentedon Jul 7, 2023
Vue实例的挂载过程是指将Vue实例与DOM元素建立关联,使Vue实例能够控制和操作对应的DOM元素。
创建Vue实例: 通过调用new Vue()创建一个Vue实例,传入选项对象来配置实例的行为和数据。
初始化生命周期钩子: 在Vue实例被创建时,会初始化一系列的生命周期钩子函数(如beforeCreate、created等)。
执行实例初始化: Vue实例开始执行初始化过程,包括初始化数据、设置计算属性、观察数据变化等。
编译模板: Vue实例根据配置中的模板选项(template)或使用render函数来编译模板,生成虚拟DOM(Virtual DOM)。
创建DOM元素: 根据虚拟DOM,Vue实例会创建对应的真实DOM元素。
挂载DOM元素: Vue实例将生成的DOM元素插入到指定的DOM容器中(通过el选项指定的元素或调用$mount方法手动挂载)。
处理模板和数据的关联: Vue实例会建立模板和数据之间的关联关系,将数据的变化反映到模板中,并在模板中的事件和指令等与数据交互时触发对应的操作。
执行挂载钩子: Vue实例在挂载过程中会触发一系列的挂载钩子函数(如beforeMount、mounted等),可以在这些钩子中执行一些初始化的操作或与其他组件进行通信。
完成上述过程后,Vue实例就成功地与DOM元素建立了关联,可以开始接收用户输入、响应数据变化,并实时更新DOM元素。
需要注意的是,如果Vue实例没有通过el选项指定挂载的DOM元素,可以通过调用$mount方法手动挂载,例如: