马上2023年了，Vue还有人用吗？ - 码农知识堂 - 文章详情页

马上2023年了，Vue还有人用吗？
Vue.js 是一个渐进式 MVVM 框架，目前被广泛使用，也成为目前前端技术中颇具代表性的一个框架。

按 Vue 作者的说法，Vue（及其生态）是一个渐进式 MVVM 框架，可以按照实际需要逐步进阶使用更多特性。

声明式渲染

简单来说，声明式渲染即希望开发者更多地表达 “想要什么”，而不用太关心想要的效果的实现细节。例如，我们希望页面上有一个 2x2 的表格，而命令式的实现方式是使用 Canvas 自己画：
```
// 获取画面和context
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
 
// 定义宽高和行列数
const width = 200, height = 100;
const colCount = 2, rowCount = 2;
 
// todo:定义画笔颜色
 
// 画横线
for(let i = 0; i <= rowCount; i++){
    ctx.moveTo(0, height / rowCount * i);
    ctx.lineTo(width, height / rowCount * i);
}
 
// 画竖线
for(let i = 0; i <= colCount; i++){
    ctx.moveTo(width / colCount * i);
    ctx.lineTo(width / colCount * i, height);
}
 
document.body.appendChild(canvas);
 
```
我们需要自己关心实现细节，例如每一条线的坐标、每一条表格线的绘制等等。所幸 HTML 为我们提供了
元素，可以让我们更简单地实现表格：
```
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
 
```
相比 Canvas 的表格，我们只需要说明需要多少行，每一行有多少个单元格即可，不用自己关注绘制细节。这个例子可以让我们对 “声明式渲染” 有一个更直观的认知。
而在 Vue 中，开发者可以直接通过模板指令来表达 “想要什么”，并不用关心它的底层实现。常见的指令如 v-if、v-for、v-show 等都是同样的作用。此外 Vue 还可以声明式地表达对数据的渲染逻辑，例如用 {{message}} 来表示 “在此处显示变量 message 的值”，而不用关心 message 的变量是如何被填入 DOM 对象中。
组件系统
每一个程序员都知道 “高内聚低耦合” 的编程原则，也都知道代码复用的重要性。但在前端代码中如何实现 “高内聚低耦合”，以及前端代码复用，并不是一件容易的事情。对于 JavaScript，尚可以使用模块化来解决内聚和复用的问题，但一旦涉及到结构（HTML）和样式，事情就不容易了。
Vue 为开发者提供了 “组件” 的概念，一个组件即一组关联的结构和逻辑。组件内部可以方便地使用声明式渲染将逻辑和结构关联起来，实现组件的高内聚。例如 Vue 官方文档的一个组件例子：
```
Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: ''
})
 
```
这个例子中，template 中定义了组件的结构，并且声明式地将 count 变量显示到