Skip to content

[vue] vue实例挂载的过程是什么? #272

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] vue实例挂载的过程是什么?

Activity

wenyejie

wenyejie commented on Jun 17, 2019

@wenyejie
  • render, 没有则去编译
  • 编译vdom
  • 对实例进行watch
Cai-zhiji

Cai-zhiji commented on Jul 7, 2023

@Cai-zhiji

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方法手动挂载,例如:

new Vue().$mount('#app'); // 手动挂载到指定的DOM元素
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @wenyejie@haizhilin2013@radio-qq@Cai-zhiji

        Issue actions

          [vue] vue实例挂载的过程是什么? · Issue #272 · haizlin/fe-interview