Vue.js 2.0 之于酷狗 Mac 版及思考

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
本文字数： 1.3k | 阅读时长 ≈ 1 分钟

本文是 Vue.js 开发实战中的总结

技术栈/架构

Vue.js 2.0 + Vue Router + Vuex

上手

官网概括了三个关键词，“易用”、“灵活”、”性能”。

关键词体现了Vue.js的主要特点，而实际开发中能感受到的优缺点却有不一样的体验。

下面说说在酷狗Mac版开发过程中得到的一些主观感受：

新鲜！——新的构建方式

  1. 单页面应用与单文件组件

    在Vue.js中，使用小型、自包含和通常可复用的组件构建大型应用程序是一个推荐的思路。

    而创建单页面应用，使用Vue.js + vue-router这样的组合是非常简单的。

    将组件(components)映射到路由(routes)，渲染到指定区域，就搭起了SPA的基本脉络。

  2. 数据驱动视图更新

    Vue实例代理了其全部数据，数据响应式地触发了视图的更新。

    这样的基础设计摒弃了绝大多数的DOM层操作，不需要显式地通过事件、jQuery、querySelector等方式去处理交互。

    从这个层次来讲，开发者更需要关心地是数据的准确分析和处理。

  3. 热模块加载

    试用CLI基础脚手架构建应用，热模块加载方便了开发者的调试。

麻烦？——特别的思路

组件通讯【demo：简单例子】

  1. 父子组件

    • Prop（父=>子）：prop 是父组件用来传递数据的一个自定义属性。
    • 自定义事件（子=>父）：父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

  2. 非父子组件

    状态管理：Vuex

    这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生，以及它们是如何被触发。当错误出现时，我们现在也会有一个 log 记录 bug 之前发生了什么。

传统开发模式与Vue.js的对比

事件绑定与视图更新

  • 传统DOM层

  • 在HTML中监听事件

    你可能注意到这种事件监听的方式违背了关注点分离（separation of concern）传统理念。不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

    1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
    2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
    3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

设计模式

  • AMD/CMD
  • 简单工厂模式
  • Vue组件/Vuex

应用场景与方式

新项目

  • SPA - Single-page Application（酷狗MAC版、潘多拉微信服务）
  • MPA - Multi-page Application（声明式创建实例或Vue CLI脚手架改造(待研究)）

旧项目

  • 渐进重构（MPA）

维护成本

  • 有一定学习框架成本，普遍认为较React、Angular要低
  • 代码逻辑可读性更高，便于维护，书写更易
  • 框架设计理念先进，社区热度高

学习

  • Vue.js 官方教程
  • 搜索引擎
0%