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/
Vue2学习(1)的更多相关文章
- Vue2学习结合bootstrapTable遇到的问题
Vue2学习 项目中在使用bootstrapTable的时候,在table里面会有操作结合vue使用过程中点击相应的操作不会起作用 解决办法 1.把事件绑定到父元素上即可,但要判断什么样的需要点击,用 ...
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- Vue2 学习笔记1
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...
- 前端MVC Vue2学习总结(一)——MVC与vue2概要、模板、数据绑定与综合示例
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CM ...
- 前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器
一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...
- 前端MVC Vue2学习总结(五)——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
随机推荐
- VMware vCenter Server 6.5.0 U1
VMware vCenter Server 6.5.0 U1gName: VMware-VCSA-all-6.5.0-8024368.iso Release Date: 2018-03-20 Buil ...
- 【漏洞复现】PHPCMS wap模块 SQL注入(附EXP)
漏洞影响版本:v9.5.8.v9.6.0 Step1: 访问:http://www.xxx.com/index.php?m=wap&a=index&siteid=1, 获取返回的coo ...
- 新概念英语(1-123)A trip to Australia
Who is the man with the beard?(胡须)A:Look, Scott. This is a photograph I took during my trip to Austr ...
- Spring中获取request的几种方法,及其线程安全性分析
前言 本文将介绍在Spring MVC开发的web系统中,获取request对象的几种方法,并讨论其线程安全性. 原创不易,如果觉得文章对你有帮助,欢迎点赞.评论.文章有疏漏之处,欢迎批评指正. 欢迎 ...
- DevExpress控件的一些快捷操作
用的DevExpress控件时,有一些操作并不太方便,根据我自己需要的封装了一些控件的事件,调用的时候直接绑定控件的事件就可以了 例如: this.ComboBoxEdit.KeyDown += Ct ...
- 详解Ajax请求(三)——jQuery对Ajax的实现及serialize()函数对于表单域控件参数提交的使用技巧
原生的Ajax对于异步请求的实现并不好用,特别是不同的浏览器对于Ajax的实现并不完全相同,这就意味着你使用原生的Ajax做异步请求要兼顾浏览器的兼容性问题,对于java程序员来讲这是比较头疼的事情, ...
- redis数据库各种数据类型的增删改查命令
redis的常用数据操作: redis是key-value的数据结构,每条数据都是一个键值对. 键的类型是字符串并且键不能重复. redis最基本数据类型是string 所以下面的操作可以省略引号&q ...
- python/ Django之中间件
python/ Django之中间件 一.中间件 中间件共分为: (1)process_request(self,request) (2)process_view(self, request, cal ...
- 云服务器ECS优惠券 阿里云 ecs 5折优惠码 阿里云5折优惠码 阿里云5折推荐码 阿里云优惠码 阿里云的5折优惠券 阿里云服务器购买优惠码 服务器购买优惠码
阿里云代金券 | 阿里云优惠券云服务器ECS,就是阿里云服务器,大家一定要清楚.云服务器ECS优惠券官方领取优惠页面:https://promotion.aliyun.com/ntms/act/amb ...
- CSS Box Model 盒子模型
1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...