React vs Vue

React 广受欢迎和拥有庞大开发社区的背后驱动力要归功于 Facebook 的专业工程师，以及在 Angular 2+ 尚未问世的 2013 年发布的开源版本。React 的 JSX 模式（一种用 JavaScript 编写 HTML 和 CSS 的方法）为新开发人员带来了更高的学习曲线，他们既要学习另一种语言，又要熟悉基于组件的架构。组件允许开发人员以模块化的方式构建应用程序；单个组件描述自己的功能和生命周期，需要时可以实例化，不使用时可以销毁。Vue 采用了这些模块化编码的核心概念，使开发人员能够使用 JSX 或编写 HTML、CSS 和 JavaScript 构建这些组件，就像在单个文件中编写传统的网络应用程序一样。Vue 在单个文件组件中将关注点分离，为开发人员简化了这种模块化结构。

在项目中使用 Vue 的优势

Vue 的学习曲线平缓，生态系统充满活力。这使任何规模的团队都能受益，因为他们不需要大量的开销来教育开发团队如何使用 Vue.js 框架。

  • Vue.js 是开发模式中另一个易学难精的例子。Vue 的一个主要优点是它对于新老开发人员都很容易上手。

  • 开箱即用，开发人员可以使用经过充分优化的高性能框架来构建任何规模的动态前端应用程序。

  • 单文件组件(SFC) 模式提供了模块化且灵活的蓝图，可简化开发过程，并为各个级别的开发人员提供愉快的体验，使组件混乱变得有序。单文件组件使 Vue 真正具有多功能性，您可以在其中实现基本功能并逐步将静态站点的各个部分采用到 Vue 中，而不是彻底修改整个网站。

  • 官方的全局状态管理支持应该让任何熟悉 Redux 和 NgRx 模式的开发人员松一口气。如果使用得当，这些库会非常强大，但 Vuex 是创建强大的全局状态模式的一个很好的中间平台，可以灵活地满足大多数开发需求。

对于那些希望快速起步的开发人员来说，除非个别用例需要，否则不要通过构建自定义的响应式模式来重新发明轮子。使用 Vue 作为框架可以节省时间和金钱，因为它已经具备良好的性能，并正式支持构建端到端应用程序所需的库，其中包括 vue-router、Vuex 状态管理、开发工具等。

在本章中，我们将首先介绍 Vue 架构，然后让你熟悉 Vue 独特的 SFC 模式和 HTML 模板语法糖。您将学习如何使用 Vue 特有的模板语法和编码模式，其中包括 Vue 绑定、指令、生命周期钩子、作用域(scopes)和本地状态。在由官方插件组成的 Vue 生态系统中，我们将主要关注核心 Vue 库。首先，让我们来看看 Vue 的项目架构。

简单 Vue 应用程序中的 Vue 实例

开始使用 Vue 的最简单方法之一是通过内容分发网络（CDN）导入 Vue 软件包。这样，您就可以使用 Vue 函数创建一个 Vue 实例。每个 Vue 应用程序都由一个根 Vue 实例组成，该实例使用 new Vue 函数创建。创建的所有相应 Vue 组件也使用相同的语法进行定义，但它们被视为嵌套的 Vue 实例，可包含各自的选项和属性：

var vm = new Vue({
  // options
})

vm 通常用来指视图模型(View Model)，它是视图的抽象，用于描述模型中数据的状态。将 Vue 实例绑定到 vm 可帮助您在代码块中跟踪 Vue 实例。

在此示例中，我们使用 jsdelivr CDN 导入 Vue，这将允许您使用 Vue 功能：

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js CDN</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
</html>

使用 class、ID 或数据属性在 <body> 标签中声明元素。Vue 以其声明式向 DOM 渲染数据的能力而著称，它使用简单的模板语法（如双大括号）来指定响应式内容，例如 {{ text }}：

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js CDN</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div>
            <p class="reactive-text">{{ text }}</p>
        </div>
    </body>
</html>

在 <head> 标记中，我们可以看到一些在 DOM 加载时启动的普通 JavaScript 代码。这将构建一个绑定到元素的 Vue 组件，其 class 为 .reactive-text。标签 text 的数据属性将用定义为 "Start using Vue.js today!"：

<html>
    <head>
        <title>Vue.js CDN</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                new Vue({
                    el: '.reactive-text',
                    data: {
                        text: "Start using Vue.js today!"
                    }
                })
            })
        </script>
    </head>
    <body>
        <div>
            <p class="reactive-text">{{ text }}</p>
        </div>
    </body>
</html>

在前面的脚本中，您将 <p> 元素与 reactive-text 类(class)绑定到新的 Vue 实例。因此，既然 Vue 理解了这个 HTML 元素，您就可以使用 {{ text }} 语法来输出 <p> 元素内的数据属性文本。

上述代码的输出如下：

Start using Vue.js today!

虽然 CDN 是一种非常便携的方式来开始在项目中包含 Vue.js，但对于由 webpack 编译的 Vue，建议使用包管理器安装方法，因为它允许您轻松控制第三方库版本。您可以在这里访问它： https://cn.vuejs.org/guide/quick-start.html 。接下来我们将探讨 webpack 示例是什么样的。