Vue.js 实例

要启动一个 Vue 应用程序，你必须使用 Vue 函数创建一个新的 Vue 实例。 每当我们创建一个新的 Vue 项目时，Vue 实例默认会在 main.js 文件中激活。 它也被称为根 Vue 实例。

语法

Vue 的应用程序设计灵感来自 MVVM 模式。 按照惯例，我们必须使用变量 vm（ViewModel 的缩写）来引用我们的 Vue 实例。 当你创建一个 Vue 实例时，你必须传入一个选项对象。 在本文中，你将学习如何使用这些选项来创建你想要的行为。

一个 Vue 应用程序包含一个用 new Vue 创建的根 Vue 实例。 它被组织成一个嵌套和可重用的组件树。 例如，如果你创建一个 todo 应用程序，那么它的组件树可能看起来像下图：

注意：所有的 Vue 组件也是 Vue 实例。

让我们看一个例子，看看 Vue 构造函数需要哪些部分。

Index.html 文件

Index.js 文件

让我们使用一个简单的 CSS 文件来使输出更具吸引力。

Index.css 文件

程序执行后，您将看到以下输出

输出

Firstname : Albert
Lastname : Pinto
I am Albert Pinto from Las Vegas

示例说明

在上面的例子中，你可以看到我们使用了一个名为 el 的参数。 这个 "el" 参数用于携带 DOM 元素的 id。 在上面的例子中，我们有 id #app。 它是 Index.html 文件中存在的 div 元素的 id。

现在，我们上面的程序的逻辑只会影响 div 元素，而不会影响它之外的任何东西。

定义了 id 之后，我们定义了 data 对象。 在 data 对象中，我们定义了一些值，比如 firstname 和 lastname。 这也在 <div> 元素中定义。 例如：

在这里，Firstname : {{firstname}} 值指定了存储在 data 对象中的数据的名字。 当你执行程序时，它将被替换到插值中，即 {{}} 中，替换为 data 对象中分配的值，即 Albert。

lastname 的情况相同，Lastname: {{lastname}} 值指定了存储在 data 对象中的数据的姓氏。 当你执行程序时，它将被替换到插值中，即 {{}} 中，替换为 data 对象中分配的值，即 Pinto。

在定义了 data 对象之后，我们有了 methods，我们在其中定义了一个名为 "mydetails" 的函数并返回一个值。 它也在 <div> 元素中定义，如下所示：

因此，你可以看到函数 mydetails 在 {{} } 中被调用。 你可以看到在 Vue 实例中返回的值被打印在 {{}} 中。

Vue 实例生命周期钩子

每个 Vue 实例都会经历一系列初始化步骤。 当你创建一个实例时，它需要设置数据观察、编译模板、将实例挂载到 DOM，并在数据更改时更新 DOM。 这个过程被称为 Vue 实例的生命周期。

Vue 实例生命周期图

Vue 实例生命周期钩子的解释

以下是 Vue 实例经历的所有事件或钩子的列表。 Vue.js 实例生命周期有八个生命周期事件/方法或钩子

1. beforeCreate 钩子
2. created 钩子
3. beforeMount 钩子
4. mounted 钩子
5. beforeUpdate 钩子
6. updated 钩子
7. beforeDestroy 钩子
8. destroyed 钩子

beforeCreate() 钩子： beforeCreate() 钩子是创建过程中发生的第一个事件或钩子。 它方便开发人员在组件添加到 DOM 之前执行操作。 我们无法访问此事件内部的 DOM。 在此钩子中，数据仍然不是响应式的，并且尚未设置组件生命周期中发生的事件。

created() 钩子： created() 钩子用于在创建实例后运行代码。 它方便你访问响应式数据，但模板和虚拟 DOM 的挂载或渲染尚未完成。 在此钩子中，事件处于活动状态，并且可以访问响应式数据，尽管尚未挂载或渲染模板。

beforeMount() 钩子： beforeMount() 钩子用于在初始渲染发生之前以及在模板或渲染函数已编译之后执行。 它在模板已编译并且 Vue 已更新虚拟 DOM 之后被调用。 这是一个很少使用的事件，在大多数情况下，你不需要使用此事件。

mounted() 钩子： mounted() 钩子是最常用的事件或钩子。 此钩子为你提供对响应式组件、模板和渲染 DOM 的完全访问权限。在此钩子中，你可以完全访问响应式组件、模板和渲染 DOM。

beforeUpdate() 钩子： beforeUpdate() 钩子在组件上的数据更改和更新周期开始之前执行。 它在 DOM 被修补和重新渲染之前运行。

updated() 钩子： updated() 钩子用于在组件上的数据更改和 DOM 重新渲染后执行。 如果你想在属性更改后访问 DOM，这是完成此操作的最佳位置。

beforeDestroy() 钩子： beforeDestroy() 钩子用于在拆卸实例之前执行。 这是 Vue 实例生命过程的倒数第二步，也是清理事件或响应式订阅的正确位置（如果你必须这样做）。

destroyed() 钩子： destroyed() 钩子是 Vue.js 实例生命过程的最后一步，用于进行任何最后一分钟的清理。