您当前的位置:HTML5培训 > 前端开发 > JS开发教程 >Vue.js介绍

Vue.js介绍

时间:2017-11-22 13:09 来源:移动互联网学院

首先,其实 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 函数,不如模板看起来一目了然。当然这里也有个人偏好的问题。

  • 北京

    010-82600385/6

    北京市海淀区西三旗悦秀路北京明园大学校内

  • 上海

    021-54485127

    上海市徐汇区漕溪路250号银海大楼11层

  • 深圳

    0755-25590506

    深圳市龙华新区人民北路美丽AAA大厦15层

  • 成都

    028-85405115

    成都武侯区科华北路99号科华大厦2层

  • 南京

    025-86551900

    南京市白下区汉中路185号鸿运大厦11层

  • 武汉

    027-87804688

    武汉工程大学卓刀泉校区科技孵化器大楼11层

  • 西安

    029-88756251

    西安市高新区高新1路12号天公大厦3层

  • 广州

    020-38342087

    广州市天河软件园柯木塱园5栋三层

  • 沈阳

    024-24349000

    沈阳市沈河区北顺城路137号锦峰大厦7层

  • 济南

    0531-88898293

    济南市高新区舜华路三庆世纪财富中心B3座6层

  • 重庆

    023-68064704

    重庆市九龙坡区渝州路87号双薪时代九楼

  • 长沙

    0731-88713136

    长沙市开福区芙蓉中路海东青大厦B座11楼

Copyright © 2004-2017 华清远见教育集团 版权所有,京ICP备16055225号,京公海网安备110108001117号