Vue2学习(1)

学习Vue2的computed 属性和 watcher

主要将computed 和methods和watcher作比较,对其各自的相关优缺点作了介绍。

  • computed 属性会基于它所依赖的数据进行缓存。每个 computed 属性,只有在它所依赖的数据发生变化时,才会重新取值(re-evaluate)。这就意味着,只要 message 没有发生变化,多次访问 computed 属性 reversedMessage,将会立刻返回之前计算过的结果,而不必每次都重新执行函数。
  • 为什么我们需要将依赖数据缓存起来?假设一种场景,我们有一个高性能开销(expensive)的 computed 属性 A,在 computed 属性的 getter 函数内部,需要遍历循环一个巨大数组,并进行大量计算。然后还有其他 computed 属性直接或间接依赖于 A。如果没有缓存,我们将不可避免地多次执行 A 的 getter 函数,这远多余实际需要执行的次数!然而在某些场景下,你可能不希望有缓存,请使用 method 方法替代。
  • 虽然在大多数情况下,更适合使用 computed 属性,然而有些时候,还是需要一个自定义 watcher。这就是为什么 Vue 要通过 watch 选项,来提供一个更加通用的响应数据变化的方式。当你需要在数据变化响应时,执行异步操作,或高性能消耗的操作,自定义 watcher 的方式就会很有帮助。

学习Vue2的遇到的一个Lodash插件

什么是lodash?

lodash是一个javascript库,也是Node JS的常用模块,可以用 npm install -g lodash 命令安装。

lodash可以用来做什么?

软件产品大都是根据广泛的需求应运而生的,很少有东西先做出来,然后再看看它可以应用到哪些地方。原生的javascript在功能实现上面更原子化,很多常用功能没有形成模块。lodash做了这些事情。比如,合并数组:

_.union([1,2,3],[2,3,4]);

//result: [1,2,3,4]

JQuery也做了类似的事情,但是侧重点不同。JQuery提供了一套操作DOM的跨浏览器解决方案,lodash更侧重于基础类型的操作,比如数组,对象,字符串,函数。

lodash列出了许多Underscore中没有的功能,貌似是补充了Underscore的功能,那么Underscore的功能lodash是不是全部兼容呢? 已经有作者写文章称可以(用lodash替换Underscore http://segmentfault.com/a/1190000000359484),但是没有看到官方的声明。

lodash在现代浏览器(Chrome, Firefox, IE ≥ 9, & Safari ≥ 5.1)和老式浏览器上(例如 IE ≤ 8 & PhantomJS)需要使用不同的版本。

Lodash 提供的辅助函数主要分为以下几类,函数列表和用法实例请查看 Lodash 的官方文档:

  • Array,适用于数组类型,比如填充数据、查找元素、数组分片等操作
  • Collection,适用于数组和对象类型,部分适用于字符串,比如分组、查找、过滤等操作
  • Function,适用于函数类型,比如节流、延迟、缓存、设置钩子等操作
  • Lang,普遍适用于各种类型,常用于执行类型判断和类型转换
  • Math,适用于数值类型,常用于执行数学运算
  • Number,适用于生成随机数,比较数值与数值区间的关系
  • Object,适用于对象类型,常用于对象的创建、扩展、类型转换、检索、集合等操作
  • Seq,常用于创建链式调用,提高执行性能(惰性计算)
  • String,适用于字符串类型

lodash/fp 模块提供了更接近函数式编程的开发方式,其内部的函数经过包装,具有 immutable、auto-curried、iteratee-first、data-last(官方介绍)等特点。Lodash 在 GitHub Wiki 中对 lodash/fp 的特点做了如下概述:

  • Fixed Arity,固化参数个数,便于柯里化
  • Rearragned Arguments,重新调整参数位置,便于函数之间的聚合
  • Capped Iteratee Argument,封装 Iteratee 参数
  • New Methods

官方文档:https://lodash.com/docs/4.17.
中文在线文档: http://lodashjs.com/docs/

原文地址:https://www.cnblogs.com/feiyu6/p/8183829.html