马上2023年了，Vue还有人用吗？ - 网站源码_资源分享

责任编辑首秀自「慕课网」，想介绍更多IT蔬果文本，开发人员圈高热闻，热烈欢迎高度关注！

Vue.js 是两个渐进 MVVM 架构，现阶段被广为采用，也正式成为现阶段后端控制技术中极具指标性的两个架构。

按 Vue 译者的讲法，Vue（或其自然生态）是两个渐进 MVVM 架构，能依照前述须要逐渐高阶采用更多优点。

Vue 渐进左图

新闻稿式图形

单纯而言，新闻稿式图形即期望开发人员更多地抒发 “想甚么”，而不必太重视想的效用的同时实现控制技术细节。比如，他们期望网页上有两个 2×2 的表单，而陈述句的同时实现形式是采用 Canvas 他们画：

t(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> 元素，能让他们更单纯地同时实现表单：

相比 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: <button v-on:click=”count++”>You clicked me {{ count }} times.</button>})

这个例子中，template 中表述了组件的结构，并且新闻稿式地将 count 变量显示到 <button> 的文本中。在 <button> 被点击时改变 count的值。能看到，组件内部的结构和逻辑都是非常容易互相访问和操作的。而在组件外部，不管是count 变量还是 <button>结构，都无法直接进行访问和操作。如果须要外部进行访问和操作，则须要表述相应的接口或者事件。这非常符合 “高内聚低耦合” 的思想。

组件一旦表述好之后即可被重复采用：

从而很好地解决后端代码复用的问题。

客户端路由和状态管理

针对单网页应用，客户端路由的支持是必不可少的两个功能。通过客户端路由，开发人员能根据不同的 URL 加载不同的后端组件（有时候也称为 “网页”），也能允许用户通过跳转的形式在不同的后端组件之间跳转。

要支持客户端路由，首先须要对当前 URL

Vue 官方的客户端路由被放到两个独立的库 vue-router 中。开发人员也能根据须要选用。

随着应用复杂度的上升，网页的数据会越来越多，且同两个数据关联多个组件的情况会越来越多。此时数据如何组织、如何表述与组件的关联关系、如何确保变更会同步到每两个关联的组件中就变得非常重要。此时可能就须要采用 “状态管理” 的库来辅助开发人员进行网页状态的管理。

状态管理库会提供全局的状态（state）对象，并表述一系列读写状态的方法。组件中只要采用状态管理提供的读写方法读写状态即可。

Vue 官方也提供了状态管理库 vuex，可供复杂应用采用。

编译 / 构建工具

借助构建工具的力量，Vue 还能提供更好的开发体验。比如基于 webpack 强大的 loader 机制，style-loader 和 css-loader 能允许开发人员在 JS 文件中直接引入 CSS 文件。

借鉴这一思路，Vue 推出了单文件组件（Single File Component，简称 SFC）格式.vue，即允许开发人员将同一组件的结构、样式、逻辑全部写在同两个文件中，然后由 vue-loader 在编译阶段将结构和逻辑都编译成 JS 文件，将 CSS 部分借用上述 style-loader 和 css-loader 同样的机制挂载到网页中。

单文件组件的推出使得 Vue 的文件组织又上两个台阶，他们能更明确地在文件层面就表述好组件，同时由于 vue-loader的支持，组件也能通过各种机制（比如 npm）在不同项目间得以复用。

除了单文件组件之外，Vue 也推出了 CLI 工具 vue-cli，方便开发人员更好地初始化项目、搭建项目开发环境并完成构建工作。