前端小白历险记（三）歪歪扭扭学vue——谈点vue学习时那些不大懂的东西

各位客官好~~客观的说，笔者好久没扮演前端小白的角色了。但这并不意味着笔者不再是前端小白了。笔者除了前端小白，又增加了ModelArts小白，Atlas 200DK小白，HiLens小白，Python小白，IoT小白等角色。

这不，张小白这几天就被Web前端第三阶段的课程给折腾得够呛。要在13天的时间内掌握vue，还包含核心源码分析，那是多么渺茫的一件事情：

好在官方延长一点点学习时间，但是笔者认为这还是远远不够的。

vue课程在某时间APP有50多节课，在某课堂有无数免费课程，大多介绍了诸如vue-cli, element-ui和设计模式，箭头函数等等知识。而本次的vue课程包含：

1、vue基础和项目实例

2、vue的移动mint-UI（仅仅一节课）

3、vue-router

4、vuex

5、vue源码分析。

从课程资料上来说，其实也不算少了，加起来有74节课。其中源码分析有18节。笔者果断地在紧张地学习中放弃了这部分内容。当然，以后还会来补的，但不是这阵子。这阵子忙着学剩下56节课就已经够吃力的。

我不知道大家是怎么学的，反正我觉得光听是不行的。我的做法是，一边听，一边做笔记，并且打开webstorm实际操作。所以一般像比如10分钟的视频，真正看完理解完，几乎要花双倍的时间，再加上把这些成果整理好，贴到读书笔记去，又要花时间。但是这样的学习，至少让笔者觉得能有点放心，至少自己实践过的确认无误后的，才可能是掌握了的。所以这才会有笔者以下读书笔记的博客：

《web前端全栈成长计划》Vue第一章学习笔记（上）https://bbs.huaweicloud.com/blogs/196720

《web前端全栈成长计划》Vue第一章学习笔记（下）https://bbs.huaweicloud.com/blogs/196719

《web前端全栈成长计划》Vue第二章学习笔记（上）https://bbs.huaweicloud.com/blogs/196721

《web前端全栈成长计划》Vue第二章学习笔记（下）https://bbs.huaweicloud.com/blogs/196722

《web前端全栈成长计划》Vue第三章学习笔记（上）https://bbs.huaweicloud.com/blogs/196803

当前，这些博客也没啥新鲜东西，主要是对视频内容进行实践后的记录。所以称之为学习笔记。（原则上，这种学习笔记是不能拿奖的。。。）

但是，由于这阶段的课程跟前期的html,css,javacript,ajax,node等课程的连贯性并不是很强。毕竟一开始的HTML和CSS由华为的宇神亲自操刀录制，而二阶段的JS是使用了黑马程序员的课程，AJAX又是宇神亲自录制；第三阶段的Node.js和vue.js则全是由尚硅谷的相关课程剪辑而成。由于各自都有自己的教学路线，在课程的选择上，常常会看到视频被强行切断的情况，而课程原本需要的前导课程在前面的其他教育公司出品的课程中并未涉及。举个很典型的例子，在vue课程的教学视频里面老师多次提到了前导课程 react。但是显然学生按照这样的1,2,3阶段去学习时，根本没有react的学习阶段。当然了，几个教学的老师讲解的也还算不错的。但是毕竟有学习脱节的情况，还是希望官方以后在这方面定制内容时能够有点加强。

废话也不多说了，即便是笔者一直在认真地学习课程，但是还是有很多知识点不是很能完全掌握的，现在就拿出以下几个做一次度娘意义上的回顾和加深印象吧。

1. 箭头函数

首先提到的是vue里面用到的非常多的箭头函数。这个玩意儿用很简单的语法描述了很强大的功能，我们在代码中常常遇到，就像那个最常用的setTimeout，举个例子如下：（摘自于action.js）

setTimeout(()=>{
  const todos = storageUtils.readTodos()
  //提交mutation
  commit(RECEIVE_TODOS, todos)
},1000)

让我们来看一下箭头函数的语法：

（param1，param2.。。，paramN ）=> {     
    statements
 }

再来看看几种变种语法：

（1）表达式

（param1，param2.。。，paramN ）=> expression

这句话相当于：

（param1，param2.。。，paramN ）=> {
    return expression;
 }

（2）一个参数

param => { statements }

这句话相当于：

(param) => { statements }

（3）没有参数

() =  { statements }

（4）返回对象字面量表达式时，需要加括号

param => ({ foo: bar })

（5）剩余参数

（param1，param2.。。，rest）=> {
    statements;
 }

（6）默认参数

(param1 = defaultValue1, param2,。。。, paramN = defaultValueN) => { 
    statements 
 }

（7）参数列表结构

f = ([a,b] = [1,2], {x:c } = { x : a + b }) => a + b + c;
f(); //6

看到最后一条，作为笔者的我已经感到崩溃了。也不知道这个6是怎么得出来的。

那么我们再看看箭头函数的用途，讲课老师在视频的时候已经提到了，箭头函数是匿名函数。它不能作为构造函数，也不能使用new，箭头函数没有arguments对象，也不绑定this——箭头函数里面使用的this一定会指向外层的this，但是它也不会自动指向window对象。

这个需要举个例子表述一下：

对于一般的匿名函数，是这样的使用this

var person = {
  name : 'zhanghui',
  getName: function(){
    return this.name;
  }
}
console.log('name='+person.getName())

此时返回的是zhanghui

但是如果是箭头函数：这里取this就是undefined。

var person = {
    name : 'zhanghui',
    getName: () => this.name;
}

所以，在这种情况下，如果你想在匿名函数中使用this表示本函数对象，那么千万不要用 箭头函数，改为普通的匿名函数就可以了。

2. 关于 ...（请读 关于点点点）

笔者在学习 vuex的过程中，看到老师多次讲到 ...  比如

这个点点点是神马东西？笔者又要崩溃了。幸好还有度娘。。。

原来...是个扩展运算符(spread). 它的作用是将一个数组转换为 用逗号分隔的参数序列。

这里有一个普通的写法：

function f(x,y,z){
  return x+y+z
}
var args = [0,1,2];
console.log('result='+f.apply(null,args))

有了扩展运算符，我们就可以这样写，不用apply方法了：

function f(x,y,z){
  return x+y+z
}
var args = [0,1,2];
console.log('result='+f(...args))

结果如下：

我们也可以在数组字面量中使用扩展运算符,这样可以实现数组合并。

var arr=['a','b','c']
var arr2=[...arr,'d','e'];
console.log(arr2)

或者用于解构赋值：

let [arg1,arg2,...arg3] = [1,2,3,4,5]
console.log(arg3)

如果遇到两个点点点会怎么样呢？那就是合并两个数组为一个数组了。

let a={x:1,y:2}
let b={z:3}
let ab={...a,...b}
console.log(ab)

不过这里有个地方需要注意：就是这种赋值属于浅拷贝。它们的成员都是对原有数组成员的引用，所以一旦修改了原有引用的值，那么新的数字也会发生变化。

肯定有人会问，张小白，你说了那么多点点点，怎么不着调啊。。。你的例子里面

...mapGetters(['totalCount','completeCount'])

...mapActions(['clearAllCompleted'])

点点点后面都是函数啊。。。这个之前加个...又是什么意思呢？

我们可以看出，mapActions,参数是个数组。它的返回值也是个数组。那么，前面加上点点点，就把这个返回的数组变成了一个实际的序列。

那我们再来看一下mapState、mapGetters、mapActions和MapMutations，以mapActions为例：

我们知道，mapActions：辅助生成计算属性，将组件的method映射为 $store.dispatch调用。在使用mapActions之前，原来的做法，是这样写的：

methods: {
    fun1(){
        this.$store.dispatch("fun1")
    },
    fun2(){
        this.$store.dispatch("fun2")
    },
    ...
    funN() {
            this.$store.dispatch("funN")
    }

像以上的写法，在vue组件（xxx.vue）里面可能会非常多，像上面的写法很浪费人力。所以mapActions就提供了一种...的写法：

methods: {
  ...mapActions(['fun1','fun2','funN']) 
}

这样可以起到简化输入的目的。

我们其实可以看到，javascript特别是ES6中，大量使用了这些间接的简化型语法规则，其最终目的也是为了使JS变得更简单。（不过是否易懂就很难说了。。。）

好了，其实在学习vue的过程中，这些让笔者感到无知的内容还是挺多的。但是笔者实在无法一一列举了，只能有些事情先做到硬记，然后以后再考虑慢慢的理解吧。好在JS这种语言，其实也不管你是否真的懂她，只要你写的代码它能跑就行了。

比如我第四章最后的代码，自己调了半天也没调出来，还是在 @胡琦 等前端大大的提示下方才解决问题。（具体参见 https://bbs.huaweicloud.com/forum/forum.php?mod=viewthread&tid=71831&page=25&authorid=70062 第249楼。

可见，其实真正要学懂，不是13天就能完成的事儿。还是要多练习，多理解。前端涉及的内容太多，html，css，js，vue，node，这些内容任何一个有点问题，可能系统就给你一个很奇怪的结果（就像前面链接提到的按键歪楼的问题）。

所以前端张小白还在努力之中。

（全文完，谢谢阅读）