一个前端外行眼中的 vue.js

vue.js 是一款十分流行的前端框架，因为简单实用，容易上手，获得了很多开发者的喜爱。本文将简单介绍一下 vue.js 的主要特点，并分析它对于普通开发者意味着什么。

Declarative Rendering （声明式渲染）

所谓声明式，个人理解是所见即所得，通过扩展 HTML 的功能，在最接近于目标 HTML 的情况下实现各种功能。这种渲染方式最常见于服务端渲染，例如 PHP 的web框架中，就常用 HTML 模版来实现数据的更新。这种方式的优点是简单明了，写好页面基础的 HTML 之后，只需要在需要数据更新的地方稍作修改就可以了。

例如，这样的 vue 代码：

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

如果让一个完全不了解 vue 的人来看，这似乎就是合法的 HTML 文件。button 元素有了一个新的属性 @click，虽然不知道是什么意思，但看起没有错误。

这种方式在熟悉服务端渲染的开发者看来，是很熟悉的，不会有太大的学习成本。

Reactivity （响应式）

相应式是指 vue 能自动跟踪 Javascirpt 中的状态变化，并更新页面上的内容。这个过程包括几个步骤：1.发生变化；2.检测到变化；3.更新变化。vue 帮助我们把第二步和第三步自动完成了。

例如，这样的 vue 代码：

import { ref } from 'vue'
const count = ref(0)

开发者只需要声明的一个 count, 并将其初始值设为 0。之后当这个 count 值变化的时候，页面上所有对这个值有依赖的地方都会被相应更新。

回想一下之前的文章 我所了解的 JavsScript里描述的 reference 赋值，我们可以建立一种思维模型：

鸽笼模型：每个鸽笼有其独特的编号，使用这个编号来确定每个鸽笼的位置。

vue 里的 ref，可以想象为给鸽笼装上了监控，鸽子的进出都可以第一时间感知到，而不是访问时才知道。

Single-File Components （单文件组件）

以往一个简单的组建需要有多个文件，包括 HTML 文件，CSS 文件，JS文件等，在项目中使用的时候很不方便，而且容易造成混乱。vue 针对这一痛点，推出了SFC，单文件组件的概念，开发者只需要使用一个文件，就可以同时包含 HTML，CSS，JS的内容。

例如，这样的 vue 代码：

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
    <div id="app">
    <button @click="count++">
      Count is: {{ count }}
    </button>
  </div>
</template>

将不同文件中的内容都写在了一起，大大提升了开发者的用户体验。无论是在开发时，还是在调试修改的时候，都不再需要频繁地切换文件了。

总结

以上是 vue.js 最核心的几个功能，只覆盖了全部功能的很小一部分，如果你想更多地了解它，可以访问它的官方网站，上面有很多详细的例子和资料。对于没有太多前端开发经验的开发者，vue.js 上手容易，配置简单，很快就可以搭建出简单的页面，也给了我一个启示，就是提升开发体验是没有上限的。

然而，当项目逐渐变得复杂，用到的特性越来越多，可能就不像上面的例子这般简单了，所以为了身心健康，我暂时还是愿意选择更加简单的服务端渲染，而非前端JS框架。