在这一章中，我们将详细介绍如何创建和使用 Vue3 实例。Vue3 实例是应用的核心部分，它管理着应用的状态、事件处理器以及其它关键功能。我们将从基础开始，逐步深入到更复杂的功能。
创建 Vue3 实例
创建一个 Vue3 实例通常需要使用 createApp 函数。这个函数接收一个配置对象作为参数，该对象可以包含数据、方法、生命周期钩子等属性。
-- -------------------- ---- -------
------ - --------- - ---- ------
----- --- - -----------
-- --
------ -
------ -
-------- ------ ------
-
--
-- --
-------- -
------- -
--------------------
-
--
-- ------
--------- -
------------------------
-
---
-- -------
------------------在上面的代码中，我们首先导入了 createApp 函数。然后，我们使用这个函数创建了一个 Vue 应用实例，并传递了一个配置对象给它。配置对象包含了数据、方法和生命周期钩子等。
使用模板
Vue 实例可以通过模板字符串或者 HTML 文件来定义视图层。这里我们使用 HTML 文件中的模板：
-- -------------------- ---- -------
---- ---------
----- ------- ------
------- ---------------------------
------
------- ------------------------------------------
--------
------ - --------- - ---- ------
----- --- - -----------
------ -
------ -
-------- ------ ------
-
--
-------- -
------- -
--------------------
-
-
---
------------------
---------在这个例子中，我们定义了一个简单的 HTML 结构，并且通过双大括号语法将 message 显示出来。同时，我们还为按钮添加了一个点击事件处理器，当用户点击按钮时会触发 greet 方法。
组件化开发
组件是 Vue 应用的基本构建块。一个 Vue 应用可以由多个组件组成，每个组件都可以有自己的状态、模板和样式。
创建组件
我们可以使用 defineComponent 来定义一个组件：
-- -------------------- ---- -------
------ - --------------- - ---- ------
----- ----------- - -----------------
----- --------------
--------- -------- ------- ----------
------ -
------ -
-------- ------ -----------
-
-
---在这个例子中，我们定义了一个名为 MyComponent 的组件，它有一个 message 属性，并且在模板中显示了这个属性。
注册和使用组件
一旦定义了组件，我们就可以在其他地方注册和使用它：
-- -------------------- ---- -------
------ - ---------- --------------- - ---- ------
----- ----- - -----------------
----------- -
-----------
--
--------- -
-----
-------------
-----------------------------
------
-
---
----- --- - -----------------
------------------在这个例子中，我们在 MyApp 中注册了 MyComponent，并在模板中使用了它。这样，我们就能够在应用中复用组件了。
计算属性和侦听器
计算属性和侦听器是 Vue 中处理数据流的重要工具。它们可以帮助我们更有效地管理和响应数据变化。
计算属性
计算属性是基于依赖的数据进行缓存的，只有当依赖的数据发生变化时，计算属性才会重新计算。
-- -------------------- ---- -------
------ - --------------- - ---- ------
----- ----------- - -----------------
------ -
------ -
---------- -------
--------- -----
-
--
--------- -
---------- -
------ ------------------ ------------------
-
-
---在这个例子中，我们定义了一个 fullName 计算属性，它会根据 firstName 和 lastName 的值自动更新。
侦听器
侦听器允许我们监听某个数据的变化，并执行相应的操作。
-- -------------------- ---- -------
------ - --------------- - ---- ------
----- ----------- - -----------------
------ -
------ -
---------- -------
--------- -----
-
--
------ -
----------------- -
------------------ ---- ------- -- ------------
-
-
---在这个例子中，我们定义了一个 watch 监听器，当 firstName 发生变化时，它会打印一条消息到控制台。
总结
通过本章的学习，我们了解了如何创建和使用 Vue3 实例，包括如何定义组件、使用模板以及处理数据流的方法。这些都是构建 Vue 应用的基础知识，掌握这些内容对于进一步学习和开发复杂的 Vue 应用非常重要。接下来，我们将继续深入探讨 Vue3 的其他高级特性。