当前位置: IT培训 > HTML5培训 > 前端开发 > JS > Vue.js介绍
Vue.js介绍 时间:2017-11-22     来源:移动互联网学院

首先,其实 Vue 也完全可以全量赋值的,唯一需要的小优化就是给 v-repeat 列表一个 track-by 属性,提示一下如何判断两个对象是否是同一份数据。如果是没有复杂交互的列表,可以直接 track-by="$index" 原地复用 DOM 元素。

合理使用 track-by 的情况下,Vue 甚至可以比 React 更快(这里渲染的是 100 * 5 的数据表,每一帧都是全量新数据赋值):

dbmon (Vue)

dbmon (react)

在超大量数据的首屏渲染速度上,React 有一定优势,因为 Vue 的渲染机制启动时候要做的工作比较多,而且 React 支持服务端渲染。

需要指出的一点:React 的 Virtual DOM 也不是不需要优化的。复杂的应用里你有两个选择 1. 手动添加 shouldComponentUpdate 来避免不需要的 vdom re-render;2. Components 尽可能都用 pureRenderMixin,然后采用 Flux 结构 + Immutable.js。其实也不是那么简单的。相比之下,Vue 由于采用依赖追踪,默认就是优化状态:你动了多少数据,就触发多少更新,不多也不少。

说起 Flux 架构,FB 提供的标准实现非常繁琐,所以社区的各种造轮子版本层出不穷,目前其实还没有找到一个公认的佳实践,而且大部分新 Flux 实现都引入了很多函数式概念,你如果对函数式编程不熟悉,光搞清楚那些概念就得花很久。

如果你真的理解了 Flux,你又会发现其实 Vue 也是可以应用 Flux 架构的。比如 optimizely/nuclear-js • GitHub 是一个 Flux 变种,他们就是同时把这个东西用在了 React 和 Vue 上面。

再谈谈开发风格的偏好:React 推荐的做法是 JSX + inline style,也就是把 HTML 和 CSS 全都整进 JavaScript 了。Vue 的默认 API 是以简单易上手为目标,但是进阶之后推荐的是使用 webpack + vue-loader 的单文件组件格式。

依然是熟悉的 HTML 和 CSS,但是可以放在一个文件里。而且你还可以使用你想要的预处理器,比如 LESS, Jade, Coffee, Babel,都可以。

然后扯一扯模板 vs. JSX 的问题。JSX 在逻辑表达能力上虽然完爆模板,但是很容易写出凌乱的 render 函数,不如模板看起来一目了然。当然这里也有个人偏好的问题。

X