在 Vue 2 之前，有一种方法可以在 Vue 中创建组件。在 Vue 3 中，引入了一种称为Composition API的新方法。现在，如果我们想在 Vue 中制作一个组件，我们有两种方法可以做到。您可能想知道到底有什么区别，所以让我们看看新的 Composition API 与 Vue 2 方法（现在称为Options API ）有何不同
Vue 中的 Composition 和 Options API 有什么区别？#
简短的回答是语法。组合 API 允许我们创建组件，而无需像选项 API 中那样的大型单个可导出对象。例如，如果我们想用 Options API 制作一个简单的[……]
Vue 是一种反应式语言，这意味着当数据发生变化时，我们可以自动在 HTML 中表示它自己。为了帮助我们解决这个问题，我们可以在 vue 中使用观察者来观察数据的变化，然后对 HTML 做一些事情，或者向用户发送有关它的消息。
这适用于简单的数据集，但如果我们开始拥有比一层更深的数据，则很难正确地观察它的变化。
在 Vue 中观察嵌套数据的变化#
要稍微了解这个问题，我们需要了解观察者在 Vue 中是如何工作的。Vue 只监视浅变化例如，下面，我们监视 中的变化count，以及console.log那些变化：
每次用户点击按钮时，我们++this.count和我们的[……]
使用 websocket 服务器是加速应用程序的好方法。API 固有地带有自己的 HTTP 开销，这意味着每次调用 API 时，都必须等待一点 HTTP 响应。
这大部分都很好，但是如果您的应用程序具有大量时间敏感且频繁的服务器请求，则可能会成为问题。一个很好的例子是聊天应用程序，您需要在其中立即查看对方在说什么。API 仍然可以在这种情况下工作，但它不是该工作的最佳解决方案。
在本教程中，我们将介绍如何使用 Node.JS 和 express 中构建的 websocket 服务器在 Vue.JS 中设置 websocket 服务器。继续阅读以获取更多信息。我还在这里写了另一个关于[……]
我们用 Javascript 做的很多工作都涉及到从服务器来回发送信息。您可能熟悉API的概念，它以特定格式将数据发送到服务器或网站，以获取特定的响应。
这些被称为REST API。虽然有用，但它们并不擅长持续的数据流。如果您尝试使用 REST API 实时执行某些操作，那么您将度过一段糟糕的时光。幸运的是，如果我们想要与用户建立实时连接，我们有一个替代方案，称为WebSockets。
WebSocket 的工作原理#
对于本教程，我们假设您熟悉Node.JS。WebSockets 本质上是在服务器和您的计算机之间建立的持续连接。当你访问一个网站时，它可以向服务器发送一个GE[……]
与其他框架一样，Vue 有许多生命周期钩子（Lifecycle Hooks），它们允许我们将代码附加到在创建或使用 Vue 应用程序时发生的特定事件 – 例如，当组件加载时，当组件添加到 DOM 时，或者当某些东西被删除时。
Vue 有很多生命周期钩子，令人困惑的是每个钩子的含义或作用。在本指南中，我们将介绍每个生命周期挂钩的作用以及如何使用它们。
先决条件
如果您不熟悉 Vue，您可能想在执行此操作之前查看我的关于创建您的第一个 Vue 应用程序的指南。或者，如果您稍微熟悉它 ，您可以阅读我的在 Vue 创建待办事项列表的指南。
Vue 中的生命周期钩子#[……]
Vuex 是一个状态管理库，可让我们处理并最终存储来自 UI 的数据。在本文中，我们将向您介绍有关 Vuex 的概念、如何使用它以及如何使用它在本地存储数据。
什么是 Vuex？#
您可能熟悉状态的概念，这只是一种花哨的数据表达方式。我们可以将状态存储在data()函数本身的 Vue 中。例如，在下面的 Vue 组件中，我们将切换状态存储为 false，并且每当我们button在模板部分单击我们时，我们将其设置为 true：
这对于交互很少的组件非常有用，但是如果我们有很多不同的组件，我们就会开始遇到问题，所有组件都依赖于相同的数据，可能跨越多个页面。为了处理这些数据，我[……]
在操作 DOM 方面，Vue 为我们提供了许多强大的功能。它简化了维护状态的工作，创建易于维护且使用有趣的 UI。Vue 做得很好的一件事是消除了对直接 DOM 操作的需要。不过，有时我们仍然需要自己操作或引用 DOM 元素。ref幸运的是，Vue 已经想到了这一点，并允许我们使用属性来做到这一点。
在 Vue 中引用 DOM 元素#
虽然当然可以.querySelector()在 Vue 文档上使用，但这不是最佳实践。如果我们想引用一个 DOM 元素，我们可以使用refVue 中的属性。
让我们看一个简单的例子。下面，我们的App.vue页面有一个输入，我们想在我们的一种方[……]
组件让我们可以将网站的某些部分拆分为可重复使用的部分，然后我们可以将它们放置在多个位置。这可能非常强大——最终意味着减少工作量，因为我们可以广泛地重用代码。
你可以很容易地想象一个看起来有点像下图的 Vue 组件树。在这里，我们有两个页面，Home和About。在每个组件中，我们都有一个可重用的组件MyDropdown，我们使用了两次。
既然 Vue 组件如此强大，那么让我们来看看它们是如何工作的，以及一些你可能不知道的事情。如果您是 Vue 的新手，请从我们的入门指南开始。
如何使用 Vue 创建组件#
Vue 组件看起来像任何其他单个文件。让我们从制作一个基本组[……]
在 Vue 中，模板是我们创建可重用组件的主要方式。我们可以使用模板来获取数据，并将其转化为用户可以看到的屏幕上的真实元素。在本文中，我们将介绍模板在 Vue 中的工作方式，以及一些您可能不知道的关于模板的内容。
在 Vue 中创建模板#
每个 Vue.vue文件都必须有一个<template>标签。<template>标签本身只是用于构建我们的组件的所有 HTML 的容器。当一个.vue文件被渲染时，所有<template>的标签都会被移除。Vue 中一个非常基本的模板如下所示：
在上面的示例中，我们有一个<template&g[……]
通常，当我们创建应用程序时，我们使用的数据决定了我们向用户展示的内容。例如，在一个待办事项应用程序中，我们可能有多个待办事项列表项。v-for在 Vue 中，通过我们的 Vue 模板中的属性可以很容易地显示多个数据点。
如何在 Vue 中使用 v-for#
假设我们有一些数据存储在单个页面组件上。我们的.vue文档看起来有点像这样：
我们的目的是在我们的模板中显示我们所有的“位置”数据。我们在这里使用静态数据——但v-for它是响应式的，就像所有 Vue.js 一样。因此，如果 API 更新了这些数据，它将传递给我们的模板。
在这个例子中，使用v-for是不费吹灰之[……]