vue2学习别人代码

vue2之学习别人的代码

目前我是一个半年多的前端这样的水平，为了提升自己的代码水平我开始阅读别人的代码，下面直接开始。

下载源码

在github下载好了一些开源的优质代码后，运行之后会有报错，不过不影响阅读哈

阅读代码

第一次阅读别人的代码，就不知道从何下手，首先下载一下node_modules包哈，看一下App.vue,main.js等入口文件和源代码的项目介绍，这是一个关于音乐的项目。

App.vue-Main.js

这两个文件没有什么可以学习的，接下来再继续往下看router文件

router

上面那段代码是我改之后的，有下面有很多这样的报错
在这段代码中我有疑惑哈，直接在下面这段代码中引入组件不就行了吗，上面这样做的好处是什么呢，别急网上搜一下我看看。

果然，自己不懂得地方确实能学到东西。这样做的目的是为了实现懒加载，优化首页面加载速度，只有调用特定组件时才加载相应组件。这段代码我看着确实有些费劲，肯定是ES6中的Promise没有学好，我先去学一下…我回来了，这段代码花了我两个小时的理解，里面有很多知识点，也是我以前没有搞懂的，里面有回调函数、异步处理、还有Import封装Promise对象乱七八糟的，学得没有很深，感觉还是很浅。以防我以后忘记，将自己总结的写在这里吧：

回调函数

顾名思义，回调函数就是回头调用的函数比如：

// 回调方法 简单来说就是执行myCallback函数时，接收两个参数，其中第二个为一个方法作为参数，这个callback就是回调函数

export default {
  created() {
    this.testCallBack();
  },
  methods: {
    testCallBack() {
      let param = '测试'
      this.myCallback(param, function (arg1, arg2) {
        alert('这是回调' + arg1 + ' ' + arg2)
      });
    },
    myCallback(param, callback) {
      setTimeout(() => {
        alert(param)
        callback(param, '222');
      }, 1000);
    }
  }
}

Promise对象

这个就是一个异步操作时用的东西，相当于一个养猪场，从杀猪刀吃猪肉的顺序是一定得。如果不用Promise对象进行处理异步操作的话，那就只能写成这样的一个回调地狱，看着很头大。

doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log(`得到最终结果：${finalResult}`);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

当使用Promise对象时那就是不一样了，

创建了一个Promise对象在doSomething函数中，返回的Promise对象中有then方法按照顺序执行方法，并返回Promise对象来让下一个还可以使用.then方法，没有使用reject方法接收失败是因为太麻烦，直接.catch就可以啦

function doSomething() {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 在完成 Promise 之前的其他操作
      console.log("完成了一些事情");
      // promise 的兑现值
      resolve("https://example.com/");
    }, 200);
  });
}


doSomething()
  .then(function (result) {
    return doSomethingElse(result);
  })
  .then(function (newResult) {
    return doThirdThing(newResult);
  })
  .then(function (finalResult) {
    console.log(`得到最终结果：${finalResult}`);
  })
  .catch(failureCallback);

分析完了这些，用了我不少时间，也确实可以查缺补漏一下。在router文件中学到了这么多，异步加载组件，以后我也可以试一下。

store仓库

这个项目还有一个比较值得学习的地方，就是store仓库，之前我写的store文件中只有一个或者两个文件，这个项目有六个。先看index.js文件，乍一看没有什么东西，但是都在外面写着呢，从外面引入的，我感觉没有必要啊，弄的确实很高级，但是没有在其他地方找到用法，先不研究了，今天到此为止