vue什么时候被加载 • Worktile社区

不及物动词

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

在Vue.js中，Vue实例的生命周期有不同的阶段，其中之一是在什么时候被加载的问题。Vue实例的加载分为两个过程：实例化过程和挂载过程。

实例化过程：
在实例化过程中，Vue会创建一个全新的Vue实例。当您使用new关键字创建一个Vue实例时，Vue会首先执行构造函数，并初始化该实例的各个属性和方法。这个过程中Vue会完成一些初始化的工作，例如解析模板和组件，合并配置项等。
挂载过程：
在实例化过程完成后，Vue会自动调用实例的$mount方法来挂载实例。挂载过程是将Vue实例与DOM进行关联的过程。在挂载过程中，Vue会找到与实例相关联的DOM元素，并将其替换为Vue实例所对应的模板。这样，Vue实例就可以控制该DOM元素及其子组件了。

在Vue 2.x版本中，可以通过显式调用$mount方法来手动挂载实例。例如：
```
new Vue({
  el: '#app', // 通过el属性指定DOM元素
  render: h => h(App) // 通过render函数指定模板
}).$mount('#app') // 手动挂载实例
```
而在Vue 3.x版本中，可以直接在创建Vue实例时将挂载目标传递给$mount方法。例如：
```
const app = createApp(App)
app.mount('#app') // 创建实例并挂载到DOM元素
```
在实例挂载完成后，Vue会自动调用实例的其他生命周期钩子函数，例如created、mounted等。

总而言之，Vue实例的加载过程是在实例化过程中完成初始化工作，然后通过挂载过程将实例与DOM关联起来。

1年前 0条评论

worktile

Worktile官方账号

Vue.js（简称Vue）是一种用于构建用户界面的渐进式JavaScript框架。Vue的加载时机可以分为以下五个阶段：

安装阶段（Installation）：在浏览器中使用Vue，需要将Vue的库文件引入到HTML页面中。可以通过各种方式引入，如CDN引入、本地引入、npm引入等。
实例化阶段（Instantiation）：在安装Vue之后，需要实例化一个Vue的根实例。这个实例可以通过Vue构造函数创建，也可以通过Vue的对象字面量方式创建。
编译阶段（Compilation）：当Vue实例化后，Vue会对HTML模板进行编译，将模板转换成渲染函数。渲染函数用来生成Vue组件的Virtual DOM树，以便最终生成真实的DOM。
挂载阶段（Mounting）：在编译完成后，Vue将会通过mount()方法将Vue组件挂载到指定的HTML元素上。这样，Vue组件的内容将会在指定的HTML元素中显示出来。
更新阶段（Updating）：一旦Vue组件被挂载到HTML元素上，任何与组件相关的数据发生变化，Vue将会自动进行DOM更新，使页面内容与数据同步。

总结起来，Vue的加载时机是在页面加载完毕后，将Vue库文件引入页面中，并在需要使用Vue功能的地方创建Vue实例，将组件挂载到指定的HTML元素上。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue.js 是一款前端 JavaScript 框架，用于构建用户界面，可以与现有的项目一起工作或独立使用。在了解 Vue.js 何时被加载之前，首先需要了解 Web 应用程序的生命周期。

Web 应用程序的生命周期可以分为以下几个阶段：

加载阶段：浏览器下载 HTML、CSS、JavaScript 文件并构建 DOM（文档对象模型）树。
解析阶段：将 HTML 文件解析为 DOM 树结构，并对 CSS 和 JavaScript 进行解析和处理。
渲染阶段：根据 DOM 树和样式，将网页内容渲染到浏览器窗口。
交互阶段：用户与页面进行交互，触发事件并进行响应。

Vue.js 的加载时间通常在解析阶段或渲染阶段发生，具体取决于 Vue.js 的引入方式和使用场景。

一、社区版引入方式

如果是通过 <script> 标签将 Vue.js 引入到 HTML 文件中，一般可以将 <script> 标签放在 <body> 标签的末尾或 <head> 标签内。在浏览器解析到引入 Vue.js 的 <script> 标签时，会立即加载和执行 Vue.js 文件。这样，在解析阶段或渲染阶段之前 Vue.js 已经加载完成，可以直接使用 Vue.js 的功能。

二、使用构建工具

在使用构建工具（如Webpack、Parcel、Rollup等）构建 Vue.js 应用程序时，Vue.js 的加载时机可以更加灵活地配置和控制。在使用构建工具时，一般采用以下几个步骤：

安装Vue.js：通过npm或yarn等包管理工具安装Vue.js库。
导入Vue.js：在项目的入口文件（如main.js）中，导入Vue.js模块，以便在整个应用程序中使用Vue.js。
创建Vue实例：在入口文件中，创建Vue实例，并指定要挂载的DOM元素。
编写Vue组件：根据具体业务需要，编写Vue组件，用于构建用户界面。
注册组件：将Vue组件注册到Vue实例中。
挂载Vue实例：在入口文件中，使用Vue实例的 $mount 方法将Vue实例挂载到指定的DOM元素上。

以上步骤中，Vue.js 会在构建阶段被加载和解析，以便在浏览器渲染阶段之前完成 Vue.js 相关功能的初始化，从而实现在交互阶段响应用户操作。

总结：Vue.js 的加载时机取决于引入方式和使用场景，一般在解析阶段或渲染阶段发生。通过 <script> 标签引入 Vue.js 时，浏览器会立即加载和执行 Vue.js 文件。在使用构建工具构建 Vue.js 应用程序时，Vue.js 的加载时机可以更加灵活地配置和控制，一般在构建阶段被加载和解析。

1年前 0条评论