首页 > 站长百科 > 网络编程

关于 Vue.js：那些好的，不怎么样的和糟糕的

2018-07-13 来源：oschina

编者注：该文章翻译于 Pier Bover 的“ Vue.js: the good, the meh, and the ugly ”，仅供探讨，不代表本站观点。

使用新的框架和库总是会让人兴奋，但也有压力。即使经过一些评估，你也永远不会知道你将会碰到什么样的意外情况。

在几乎每天使用 Vue 大约两年后，我和它的蜜月期结束了，我终于可以从一些角度来写点什么了。

Tips：以下纯属个人观点。

数据绑定在前端领域是个大问题。现在我们更专注于数据，而不像使用 jQuery 一样对 DOM 进行微观管理。Vue 通过双向响应数据绑定系统巧妙地处理这个问题。

为实现这种响应性，Vue 为状态中的每个变量添加了许多 getter 和 setter ，以便它可以跟踪更改并自动更新 DOM 。这种方法并不完美，我们稍后会再提到。

使用 Vue ，你无需使用 MobX 或 React Router 等非官方软件包来处理应用程序的关键部分。Vue 提供了 Vue Router 和 Vuex 。这些都是很好的库，而且是为 Vue 量身定制的。

Vue 非常快。它也许不是最快的，但它的性能表现对绝大多数 Web 项目来说都是顶级的。你上一次需要每秒渲染和更新数千个 DOM 元素是什么时候？

这是在 JavaScript 开发者中具有争议性的一个话题。无论你喜欢还是不喜欢，HTML 模板已经在许多语言中进行了数十年的实战打磨，并且是在 Vue 中编写动态标记（dynamic markup）的首选。

此外，Vue 也支持 JSX 。

从 React 迁移到 Vue ，我似乎有感受到一股清新空气，不再到处 bind(this) 或 setState（）。好极了！但过了一段时间，我开始质疑 Vue 组件语法的有效性。

Vue 组件是使用对象创建的，这是定义组件函数的示例：

export default {
 methods: {
  increment () {
   this.count++;
  }
 }
}

你将为计算属性、组件状态、监视工具等添加类似的模板。Vue 中几乎所有的内容都有自己的特殊语法和更多的模板文件。

相比之下，Marko 也有相同的东西，但更简洁：

class {
 increment() {
  this.state.count++;
 }
}

我的重点不是关于是否要使用类，而是 Vue 使用的是任意对象结构而不是语言特性。

如果你觉得我有点想找事，我不会怪你。 Vue 还提供了基于类的语法，但它实际上更像是事后诸葛亮。

Vue 社区用户喜欢在 Discord 上闲聊，这更像是一款专为游戏玩家社区设计的聊天工具。如果你遇到问题，聊天可能是你最好的选择，因为官方论坛是一片荒凉的土地，而且你也不敢在 Github 上问问题。

聊天很乱，更主要的是聊天的内容无法被搜索引擎索引到。同样的问题（及其相关的讨论）注定要一次又一次地重复。

这种使用聊天来解答问题的趋势正困扰着开源项目，我认为它应该停止，根本没有集体学习作用。

只要你不偏离正轨，一切都会很好，但过了一段时间你可能会发现 Vue 周围有很多小小的 ifs 和 buts 。

比方说：

响应式系统仅跟踪一定条件下的变化。不要指望它能提供任何你想要的东西。通常，你可能需要尽可能地简化和整理数据以避免头痛。当然，这些都在文档的细则中有进行解释。
过渡系统 <vue-transition> 不适用于列表。实际上，你需要使用的是 <transition-group>，它的工作方式略有不同，并且会在 DOM 中引入新元素。此外，有些东西你本期望会是一个已解决的问题，但实际上你必须要自己去实现它。
如果你需要组件实例中的 non-reactive 状态，你将进入一个未知的领域。

等等。

不要误会我的意思，这些都不是什么大问题，但似乎每当你开始动手摸索时，就会出现其它的小烦扰。