当前位置：首页 > news >正文

Vue的实例

news 来源：原创 2025/5/25 3:35:28

Every Vue application starts with a single Vue component instance as the application root. Any other Vue component created in the same application needs to be nested inside this root component.

每个 Vue 应用都以一个 Vue 组件实例作为应用的根开始。在同一个应用中创建的任何其他 Vue 组件都需要嵌套在这个根组件内部。

In Vue 2, Vue exposes a Vue class (or JavaScript function) for you to create a Vue component instance based on a set of configuration options, using the following syntax:

在 Vue 2 中，Vue 暴露了一个 Vue 类（或 JavaScript 函数），你可以基于一组配置选项使用以下语法创建一个 Vue 组件实例：

const App = {
  //component's options
}
const app = new Vue(App)

Vue receives a component, or the component’s configuration to be more precise. A component’s configuration is an Object containing all the component’s initial configuration options. We call the structure of this argument Options API, which is another of Vue’s core APIs.

Vue 接收一个组件，或者更准确地说，是接收一个组件的配置。组件的配置是一个 Object，包含组件的所有初始配置选项。我们称这个参数的结构为 Options API，这是 Vue 的另一个核心 API。

Beginning with Vue 3, you can no longer call new Vue() directly. Instead, you create the application instance using the createApp() method from the vue package. This change in functionality enhances the isolation of each Vue instance created both on dependencies and shared components (if any) and the code readability:

从 Vue 3 开始，你不能再直接调用 new Vue()。相反，你需要使用 vue 包中的 createApp() 方法来创建应用实例。这一功能的改变增强了每个 Vue 实例在依赖和共享组件（如果有）方面的隔离性，并提高了代码的可读性：

import { createApp } from 'vue'

const App = {
  //component's options
}

const app = createApp(App)

createApp() also accepts an Object of the component’s configurations. Based on these configurations, Vue creates a Vue component instance as its application root app. Then you need to mount the root component app to the desired HTML element using the app.mount() method, as follows:

createApp() 同样接受一个包含组件配置的 Object。根据这些配置，Vue 会创建一个以应用根 app 为形式的 Vue 组件实例。然后，你需要使用 app.mount() 方法将根组件 app 挂载到指定的 HTML 元素上，如下所示：

app.mount('#app')

#app is the unique id selector for the application’s root element. The Vue engine queries for the element using this id, mounts the app instance to it, then renders the application in the browser.

#app 是应用程序根元素的唯一 id 选择器。Vue 引擎使用这个 id 查找元素，将应用实例挂载到该元素上，然后在浏览器中渲染应用程序。