vue在什么时候挂载dom • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

Vue 在何时挂载 DOM 是 Vue 的生命周期中的一个重要阶段，它发生在 Vue 实例被创建之后。具体地说，Vue 的 DOM 挂载发生在 Vue 实例的 mounted 钩子函数中。

在 Vue 的生命周期中，初次渲染 DOM 的过程包含了以下几个阶段：

实例化：在实例化 Vue 对象时，会执行一系列初始化操作。这些初始化操作包括状态的初始化、数据响应式处理等。
编译模板：Vue 的模板会被编译为渲染函数，这个过程会将模板转换为对应的 Virtual DOM（虚拟 DOM）。
创建真实 DOM 并插入页面：在编译模板后，Vue 会根据虚拟 DOM 创建真实 DOM，并将其插入到页面中。这个过程中，Vue 提供了一个钩子函数 beforeMount，它会在实例的 render 函数执行之前被调用。
执行渲染函数：在真实 DOM 插入页面后，Vue 会执行生成的 render 函数，通过更新 Virtual DOM 来更新页面。
挂载 DOM：当渲染函数执行完成后，Vue 会将生成的真实 DOM 插入到页面指定的位置。这个过程发生在实例的 mounted 钩子函数中，也就是在实例完全被挂载到页面后执行。

总结起来，Vue 在实例化、编译模板、创建真实 DOM 并插入页面、执行渲染函数的过程后，才会进行 DOM 的挂载。这保证了在 Vue 实例被完全初始化、渲染完成后，才将结果显示在页面上。这也是 Vue 的响应式特性体现之一，使得数据变化时可以自动更新到 DOM。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue在什么时候挂载DOM取决于Vue的生命周期。Vue的生命周期分为创建阶段、挂载阶段、更新阶段和销毁阶段。下面是Vue在挂载DOM阶段的一些重要时刻：

beforeCreate（创建前）：在实例初始化之后，数据观察和事件配置之前调用。此时DOM还未挂载。
created（创建完毕）：在实例创建之后立即调用，此时实例已经完成数据观察、属性计算和方法设置，但尚未挂载DOM。可以在这个阶段进行一些数据的初始化操作。
beforeMount（挂载前）：在挂载开始之前被调用，此时template编译成render函数将要被渲染。此时，还没有生成真正的DOM节点。
mounted（挂载完毕）：在实例挂载到DOM元素上后调用，此时可以访问到DOM节点。可以在这个阶段进行一些需要DOM节点的操作，比如获取DOM元素的宽高等。

值得注意的是，Vue的模板在mounted阶段才会渲染成真实的DOM，并且mounted阶段只会执行一次。如果之后有数据改变需要重新渲染DOM，则会触发更新阶段的钩子函数。

updated（更新完毕）：当数据更新导致重新渲染时调用，此时DOM已经重新渲染完毕。可以在这个阶段进行一些需要DOM节点的操作，但需要注意避免无限循环更新。

总结：Vue在mounted阶段挂载DOM，此时可以访问到真实的DOM节点。在beforeCreate、created、beforeMount这些阶段，DOM还未挂载。在updated阶段，DOM已经重新渲染完毕。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，DOM的挂载发生在Vue实例的生命周期的特定阶段。具体来说，DOM的挂载是在Vue实例的mounted钩子函数中进行的。

Vue实例的生命周期包括多个阶段，每个阶段都有对应的钩子函数。以下是Vue实例完整声明周期的钩子函数：

beforeCreate: 在Vue实例创建之前调用，此时数据观测及事件配置还未进行。
created: 在Vue实例创建完成后立即调用，此时数据观测及事件配置已完成，但DOM尚未生成且未挂载。
beforeMount: 在Vue实例挂载之前调用，此时模板编译已完成，但尚未将编译后的模板挂载到页面中。
mounted: 在Vue实例挂载到页面之后调用，此时Vue实例已通过虚拟DOM将编译后的模板渲染为真实的DOM，并将其插入到页面中。
beforeUpdate: 在数据更新之前调用，即在重新渲染之前调用，此时虚拟DOM已生成但尚未重新渲染为真实DOM。
updated: 在数据更新之后调用，即在重新渲染之后调用，此时Vue实例的数据已更新并且真实DOM已重新渲染。
beforeDestroy: 在Vue实例销毁之前调用，此时Vue实例仍然完全可用。
destroyed: 在Vue实例销毁之后调用，此时Vue实例及其相关的DOM已完全销毁。

由上述钩子函数可以看出，mounted钩子函数在Vue实例挂载到页面之后调用，此时DOM已经生成并挂载到页面中，可以进行DOM操作或与其他JavaScript库进行交互。

以下是一个简单示例，展示Vue实例生命周期中DOM挂载的过程：

<!DOCTYPE html>
<html>
<head>
  <title>Vue DOM挂载示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      },
      mounted: function() {
        // DOM已挂载
        console.log('DOM已挂载');
      }
    });
  </script>
</body>
</html>

在上述示例中，mounted钩子函数中的回调函数会在DOM挂载之后被调用，我们可以在该回调函数中进行DOM操作或其他相关操作。

1年前 0条评论