资讯专栏INFORMATION COLUMN

关于一些Vue的文章。(1)

Lemon_95 / 3389人阅读

摘要:原文链接我的,欢迎。今天分享的一篇文章是关于的源码解析的,链接源码解析,在现在所做的项目里的每个组件,至少都有一个辅助函数,或者是,或者是扩展运算符,以及解构也经常用到。大概以前看源码的时候,没怎么仔细想过把。

原文链接我的blog,欢迎STAR。

今天分享的一篇文章是关于vuex的源码解析的,链接vuex源码解析,在现在所做的项目里的每个组件,至少都有一个辅助函数,或者是....mapGetters,或者是...mapActions, 扩展运算符,以及解构也经常用到。这篇文章解决了困扰我许久的一个疑惑,为什么有时候辅助函数里面传的是一个字符串数组,而有的时候传的是一个对象。大概以前看源码的时候,没怎么仔细想过把。

其实很简单,vuex底层对传入辅助函数的参数都进行了一个转化处理,来看源码(以mapState为例):

export function mapState (states) {
  const res = {}
  normalizeMap(states).forEach(({ key, val }) => {
    res[key] = function mappedState () {
      return typeof val === "function"
        ? val.call(this,this.$store.state,this.$store.getters)
        : this.$store.state[val]
    }
  })
  return res
}

mapState,对传入的参数首先调用normalizeMap方法,来看normalizeMap的源码:

function normalizeMap (map) {
  return Array.isArray(map)
    ? map.map(key => ({ key, val: key }))
    : Object.keys(map).map(key => ({ key, val: map[key] }))
}

对传入的参数先判断是不是数组,如果是数组调用数组的map方法,转化为{key, val: key} 对象的形式,如果不是数组, (那就是对象),便利对象的key 转化为{key, val: map[key]}对象的形式。
最后返回。

今天还学到了一点,在项目里通常需要取到表单的值, 我一般是这么做的:

    const { userName, password, checked } = this.form

发现原来可以给变量一个初始值

    const { userName, password, checked = [] } = this.form

在学习es6 时,只知道能够给函数的参数给默认值,类似于下面:

    function name (a, b = [], c = {}) {
        // 其他代码
    }

完。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111833.html

相关文章

  • 关于Vue2一些值得推荐文章 -- 七月初

    摘要:七月初推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。七月不在山,不在岸,采我之时七月半。七月银潢七月秋浪高,黄昏欲渡未成桥。至今王子乔唐宋之问王子乔,爱神仙,七月七日上宾天。吸日精,长不归,遗庙今在而人非。 七月初 vue2 推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。...

    wuyangchun 评论0 收藏0
  • 关于一些Vue文章。(2)

    摘要:原文链接我的,欢迎。这次想要分享的一篇文章是从一个奇怪的错误出发理解的基本概念。瞬间明白了,原来是函数,一个考验编程能力的函数,比更接近编译器。来看这里有一个小知识点被忽略在实例挂载之后,元素可以用访问脑补会用到的场景中。。。 原文链接我的blog,欢迎STAR。 这次想要分享的一篇文章是:从一个奇怪的错误出发理解Vue的基本概念。 这篇文章以Vue的两种构建方式做为切入点,深入探讨...

    DirtyMind 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    Terry_Tai 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • webpack配合vue.js实现完整单页面demo

    摘要:本篇文章主要是我在开发前研究了的单页面应用,因为需要用到的,所以确保安装了,建议官网安装最新的稳定版本。本文章只是和大家探讨怎么利用配合做一个单页面应用,具体关于里面的内容怎么写并不在本篇文章的介绍范围。 本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本。并且在项目中需要加载一些np...

    2450184176 评论0 收藏0

发表评论

0条评论

Lemon_95

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<