Vue学习笔记（一）

备注：为了毕设紧急学习的个人笔记，不是为了总结分享···

es6模块化

每个js都是独立的模块，import导入其他模块成员，export向外共享模块成员

【附上b站vue视频的具体位置】



铺垫知识-03.ES6模块化 - 默认导... P230 - 00:16 · 模块化语法



1.默认导出：export default，里面的才是能从外头访问到的成员→每个模块只能有一次export default！！！

2.默认导入：import 接受名称 from 模块标识符（名字）接受名称可自拟只要合法就行，并不是模块里头的名称

3.按需导出：export 按需导出的成员（变量、方法等）每个模块可以多个按需导出

4.按需导入：import {名称(用逗号隔开)} from 模块标识符（包或路径），可以跟默认导入结合使用，跟{}之间用逗号隔开

{名称}必须跟按需导出的名称一致，但是可以使用as重命名，eg：{s1, s2 as str2, say}重命名后文件中要使用新名字

5.直接导入并执行模块中的代码（只想执行某个模块的代码，不需要得到向外共享的成员）

方法：import “执行路径”【node执行本文件就会同时执行被导入模块的代码】

Promise（专为回调地狱而生）

1.回调地狱：多层回调函数相互嵌套。耦合性太强难以维护，产生冗余代码相互嵌套，可读性差。

2.Promise是一种构造函数，可使用new方法，eg：const p=new Promise();new的对象代表一个异步操作。

（1）.then()

①Promis.prototype（原型对象）包含一个.then()方法，通过原型链（eg：p.then()）访问.then()。

②.then()用来预先指定成功和失败的回调函数，eg：p.then(result=>{}, error=>{}),成功的回调必选，失败的回调可选。

p.then((形参存放前面操作返回值)=>{这里面可以操作返回值，也可以return新的Promis对象链式调用})

③.then()方法如果返回了新的Promise对象，可以通过下一个.then(）继续处理这个新对象=>链式调用

④.catch()捕获错误。eg：p.catch((err)=>{console.log(err.message)})不希望前面的错误影响后面的.then()执行就把catch往前调

（2）.all()方法会发起并行的异步操作，所有异步操作都结束才会执行下一步的.then() 【可以拿到所有异步操作的结果】=>等待机制

（3）.race()与.all()不同的是只要有一个异步操作完成就立刻执行.then()【得到的是执行最快的异步操作结果】 =>赛跑机制

3.基于Promise自己封装方法

最基础：function 方法名(形参){

return new Promise()//创建的是形式上的异步操作

return new Promise(function(resolve, reject){

定义异步操作(err, data)=>{

//处理错误和传递数据

if(err) return reject(err)

resolve(data)

}

})//创建的是具体的异步操作

}

4.使用async和await简化.then的使用

(1)在Promise的异步操作前加await，返回值不再是Promise类型而是指向真正的值？可以直接拿到想要的结果



铺垫知识-16.async和await - 了解as... P243 - 03:05 · 介绍await



(2)方法内部用到await，方法前面就要加async。在async方法中，第一个await之前的代码同步执行，之后的代码异步执行。【即方法内部await之前的代码会执行，到了await会先跳出方法执行调用方法之后的代码，再回到方法里头执行await和后续的代码】



铺垫知识-17.async和await - asyn... P244 - 02:46 · await注意事项



5.EventLoop+宏任务和微任务经典面试题*

245-251



铺垫知识-20.EventLoop - EventLoop的概念及经典面试题 P247 - 01:05 · eventloop面试题()





铺垫知识-21.宏任务和微任务 - ... P248 - 01:08 · 宏任务和微任务



6.API接口案例

实现步骤：在package里设置“type”=“module”来使用es6的模块包