Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haizhilin2013 opened this issue Jun 16, 2019 · 3 comments
Open

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

haizhilin2013 opened this issue Jun 16, 2019 · 3 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the vue vue label Jun 16, 2019
@wenyejie
Copy link

  • render, 没有则去编译
  • 编译vdom
  • 对实例进行watch

@qq-radio
Copy link

qq-radio commented Jan 4, 2021

@Cai-zhiji
Copy link

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
Labels
vue vue
Projects
None yet
Development

No branches or pull requests

4 participants