准备好了吗？

我们刚才简单介绍了 Vue 核心最基本的功能——本教程的其余部分将更加详细地涵盖这些功能以及其它高阶功能，所以请务必读完整个教程！

应用 & 组件实例

创建一个应用实例创建一个应用实例

每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的：

const app = Vue.createApp({/* 选项 */
})

该应用实例是用来在应用中注册“全局”组件的。我们会在后面的指南中详细讨论，简单的例子：

const app = Vue.createApp({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)

应用实例暴露的大多数方法都会返回该同一实例，允许链式：

Vue.createApp({}).component('SearchInput', SearchInputComponent).directive('focus', FocusDirective).use(LocalePlugin)

可以在 API 参考中浏览完整的应用 API。

根组件

传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。
一个应用需要被挂载到一个 DOM 元素中。例如，如果你想把一个 Vue 应用挂载到 javavscript<div id="app"></div>，应该传入 #app：

const RootComponent = {/* 选项 */
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

与大多数应用方法不同的是，mount 不返回应用本身。相反，它返回的是根组件实例。

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示组件实例。

尽管本页面上的所有示例都只需要一个单一的组件就可以，但是大多数的真实应用都是被组织成一个嵌套的、可重用的组件树。举个例子，一个 todo 应用组件树可能是这样的：

Root Component
└─ TodoList├─ TodoItem│  ├─ DeleteTodoButton│  └─ EditTodoButton└─ TodoListFooter├─ ClearTodosButton└─ TodoListStatistics

每个组件将有自己的组件实例 vm。对于一些组件，如 TodoItem，在任何时候都可能有多个实例渲染。这个应用中的所有组件实例将共享同一个应用实例。

我们会在稍后的组件基础章节具体展开。不过现在，你只需要明白根组件与其他组件没什么不同，配置选项是一样的，所对应的组件实例行为也是一样的。

组件实例 property

在前面的指南中，我们认识了 data property。在 data 中定义的 property 是通过组件实例暴露的：

const app = Vue.createApp({data() {return { count: 4 }}
})
const vm = app.mount('#app')
console.log(vm.count) // => 4

还有各种其他的组件选项，可以将用户定义的 property 添加到组件实例中，例如 methods，props，computed，inject 和 setup。我们将在后面的指南中深入讨论它们。组件实例的所有 property，无论如何定义，都可以在组件的模板中访问。

Vue 还通过组件实例暴露了一些内置 property，如 $attrs 和 $emit。这些 property 都有一个 $ 前缀，以避免与用户定义的 property 名冲突。

生命周期钩子

每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码：

Vue.createApp({data() {return { count: 1}},created() {// `this` 指向 vm 实例console.log('count is: ' + this.count) // => count is: 1}
})

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 unmounted。生命周期钩子的 this 上下文指向调用它的当前活动实例。
###TIP

不要在选项 property 或回调上使用箭头函数，比如
created: () =>console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，
经常导致 Uncaught TypeError: Cannot read property of undefined
或 UncaughtTypeError: this.myMethod is not a function 之类的错误。

生命周期图示

下图展示了实例的生命周期。我们不需要立马弄明白所有的东西，不过随着不断学习和使用，它的参考价值会越来越高。

VUE自学日志02-应用与组件实例相关推荐

VUE自学日志04-Data Property 和方法
Data Property 和方法 Data Property 组件的 data 选项是一个函数.Vue 在创建新组件实例的过程中调用此函数.它应该返回一个对象,然后 Vue 会通过响应性系统将其包裹 ...
VUE自学日志03-模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层组件实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML ...
VUE自学日志01-MVC和MVVM
一.需要了解的基础概念 Model(M)是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开.这里的难点主要在于需要和前端约定统一的接口规则. View(V)是视图层,也就是 ...
VUE自学日志05-计算属性和侦听器
## 计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如,有一个嵌套数组对象: Vue.createApp({data() {re ...
Mybatis自学日志02
模糊查询 map 接口UserDao //万能的Map插入一个用户 void addUser2(Map<String,Object>map); 实现类UserDaoImpl @Overri ...
SpringMVC自学日志02（初识SpringMVC）
什么是SpringMVC? Spring MVC是Spring Framework的一部分,是基于Java实现MVC的轻量级Web(其中servlet是最主要的)框架. 官方文档地址:https:// ...
Spring自学日志02（对象的创建，依赖注入）
IOC创建对象的方式无论是否使用,只有在xml文件中被注册(bean),就会被创建. 1.用无参构造创建对象 <!--无参构造创对象类型变量名 = new 类型(); Hello hell ...
Vue详细介绍及使用（组件）
Vue详细介绍及使用一.Vue组件概念 1.基本的概念为什么需要组件化?在实际开发中,我们经常也会封装很多公共方法,达到复用的目的,也便于维护.对于前端也是一样,那么什么是组件? 官方定义 ...
vue基础入门-应用组件实例
https://v3.cn.vuejs.org/guide/instance.html#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%BA%94%E7%94%A8%E ...

VUE自学日志02-应用与组件实例