Vue.js框架

亚米鸭的故事汇
140 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

Vue.js 简介

Vue（读音 /vjuː/，类似于 view）是目前最流行的、国产的前端 MVVM 框架，是一套用于构建用户界面的渐进式框架 Vue 涉及到的官方网站：

国内也有很多公司在使用 Vue 做开发，比如：饿了么。

image.png 大家可以直接在 Vue.js Github Releases 上找到 Vue 各个版本的发布情况。

Vue 之所以非常火 🔥 ，是因为它本身的一些突出的特点，它简单易学、开箱即用、体积小、性能高。除了其它框架有的它都有之外，还有一些别的框架不具备的特点，比如：双向数据绑定、单文件组件（SFC）等等。总结下来，Vue 具备以下特点：

  • 简洁：HTML 模板、Vue 实例、JSON 数据。

  • 轻量：33kb，性能好（具体大小跟实际版本相关）。

  • 渐进式：边学边用。

  • 设计思想：视图与数据分离，无需操作 DOM。

  • 社区：大量的中文资料和开源案例:

下面我们对以上特点中的某些抽象概念做下简要说明。

关于渐进式

所谓渐进式，我们可以理解为一步一步的意思，也就是说，当我们使用 Vue 的时候，不需要把它的所有东西都用上，可以根据实际情况合理选择我们需要的部分。

方便大家理解，我们来看下面这张图片：👇

图片描述

如上图所示，声明式渲染和组件系统是 Vue 的核心库所包含的内容，而客户端路由、状态管理、构建工具等都有专门的解决方案。这些解决方案相互独立，你可以在核心的基础上任意选用其它部件，不一定要全部整合在一起。

关于设计思想

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层（HTML DOM），不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

使用 Vue 可以让 Web 开发变得更简单，同时也颠覆了我们传统的前端开发模式，它提供了现代前端开发法中的常见高级功能。比如：

  • 解耦视图和数据
  • 可复用的组件
  • 前端路由
  • 状态管理
  • 虚拟 DOM

Vue.js 版本介绍

Vue 1.0

最初的 Vue（v1.0 之前）并不是一个渐进式框架，而是一个视图层库。

它由一个视图层库蜕变成一个渐进式框架（Vue 1.0）时，做了如下改进：

  1. 针对 v-bind 和 v-on 提供缩写形式 :xxx 与 @。
  2. 清理精简所提供的接口。
  3. 提高初始化的渲染效率。
  4. 两个官方工具的增强：vue-loader 与 vueify。

Vue 2.0

从 1.0 升级到 2.0 的时候，Vue 团队对它的源码做了大幅度的重构，添加了虚拟 DOM 的概念，使性能有了很大的提高，也为日后的跨端发展（Weex）打下了基础。

Vue 2.0 相较于前一个版本做了如下改进：

  • 借鉴了 React 的 Virtual DOM（虚拟 DOM） 概念，通过 fork 自 snabbdom 的轻量 Virtual DOM 框架，实现了对渲染层的重写，大大提升了框架的性能。

  • 增加了服务端渲染功能。

Vue 3.0

Vue 3.0 正式版本发布于 2020 年 9 月，Vue 3.0 可以说是从 0 开始编写的、更加清晰和更易维护的架构，主要进行了性能的改进，更小的资源包、更好的类型支持（TypeScript）、提供了一大批新的 API，为框架的长期迭代奠定了基础。

Vue 3.0 跟 Vue 2.0 相比具有以下特点：

  • 更快：初始渲染，更新速度提速一倍。
  • 类型更友好：完美拥抱 TypeScript。
  • 更小：Tree-shaking 友好。
  • 更好的警告信息。
  • 更好的 API 特性等等。

为什么使用 Vue.js

我们都知道完整的网页是由 DOM 组合形成最基本的视图结构，再加上 CSS 样式的修饰，使用 JavaScript 接受用户的交互请求，并通过事件机制来响应用户交互操作而形成的。

图片描述

我们把最基本的视图结构（也就是 HTML DOM）拿出来，称为视图层。这个被称为视图层的部分就是 Vue 核心库关注的部分。

Vue 为什么关注视图层呢？🤔

因为随着前后端的分离，部分业务逻辑也交给了前端页面来操作，这直接导致一个问题就是——页面元素过多，层级嵌套颇深结构复杂；数据和视图全部混合在 HTML 中，导致代码很难维护。

有过前端开发基础的读者都应当了解过 jQuery，jQuery 给予我们简洁的语法和跨平台的兼容性，极大地简化了 JavaScript 开发人员遍历 HTML 文档、操作 DOM、事件处理等操作。不失为传统开发模式的利器。 创建一个名为 jQueryDemo.html 的文件，并写入以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jquery 测试</title>
    <!-- 引入 jquery 框架 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div id="root">hello world</div>
    <script>
      $("#root").on("click", function (event) {
        event.target.innerText = "hello 魈";
      });
    </script>
  </body>
</html>

我们用 jQuery 实现了一个简单的 Demo：当我们点击 root 元素的时候，会把之前的 hello world 变成 hello 魈。

Vue 的实现方式

在线上环境中创建一个 VueDemo.html 文件，并写入以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue.js 测试</title>
    <!-- 引入 Vue.js 框架 -->
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root">
      <div @click="handleClick">{{msg}}</div>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            msg: "hello world",
          };
        },
        methods: {
          handleClick() {
            this.msg = "hello 魈";
          },
        },
      }).mount("#root");
    </script>
  </body>
</html>
  • 在 VueDemo.html 中，我们定义了一个 msg: "hello world" 属性，并且通过 Vue 把这个 msg 属性跟视图绑定到了一起：
<div @click="handleClick">{{msg}}</div>
  • 当我们点击这个视图元素 div 的时候，我们动态修改了 msg 属性的值：
  handleClick() {
     this.msg = "hello 魈";
  }

可以看到，jQuery 和 Vue 两者实现的效果都是一样的。

通过上面两种实现方式的对比，可能同学们会有这样的疑惑 🤔 ：二者相比，jQuery 的实现貌似更简洁啊！

没错，当页面元素不多时，你可能会觉得使用 jQuery 更简单，但是随着业务需求的不断增加，我们的 jQueryDemo.html 文件可能会变成这样：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jquery 测试</title>
    <!-- 引入 jquery 框架 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div id="root">
      页面
      <div>
        页面中的某个模块
        <div>
          <div>hello world</div>
        </div>
      </div>
    </div>
    <script>
      $("#root").on("click", function (event) {
        $("#root div div div")[0].innerText = "hello 魈";
      });
    </script>
  </body>
</html>

由上面代码我们发现，当元素层级很深的时候，我们用 jQuery 的实现就会变成这样：

$("#root div div div")[0].innerText = "hello 魈";

这样的实现方式很容易出错，而且也不方便维护。 同样，我们来看看 Vue 是如何实现上面这种复杂情况的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue.js 测试</title>
    <!-- 引入 Vue.js 框架 -->
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root">
      <div @click="handleClick">
        页面
        <div>
          页面中的某个模块
          <div>
            <div>{{msg}}</div>
          </div>
        </div>
      </div>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            msg: "hello world",
          };
        },
        methods: {
          handleClick() {
            this.msg = "hello 魈";
          },
        },
      }).mount("#root");
    </script>
  </body>
</html>

由此可以看出，在 Vue 的实现中，还是只关注视图层的内容，也就是 msg 属性绑定在视图的地方，不管视图层级有多深，总能够准确找到这个元素，并且根据 msg 属性值做对应视图的渲染。

avatar
文章
阅读
粉丝