vue学习整理

VUE的界面配置
1.进入要安装的目录;
2.vue create hello-vue;
3.//选择下面的选项（默认的有babel、和eslint）

4.选择手动安装
    Babel：转码器，可以将ES6转为ES5代码
    TypeScript：官网--https://www.tslang.cn/docs/home.html,是JavaScript的超集，扩展了 JavaScript 的语法，-- 通过类型注解提供编译时的静态类型检查。--
		1.是否使用class风格的组件语法：Use class-style component syntax?
		2.是否使用babel做转义：Use Babel alongside TypeScript for auto-detected polyfills?
	PWA：-- 使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验 --
    CSS Pre-processors：选择CSS 预处理类型：Pick a CSS pre-processor
    Linter / Formatter
        1.选择Linter / Formatter规范类型：Pick a linter / formatter config
		2.选择lint方式，保存时检查/提交时检查：Pick additional lint features
    Testing
		选择Unit测试方式
		选择E2E测试方式
            

HTTP状态码

当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。

常见的状态码：

200 – 请求成功

400 – 请求参数错误，服务器不理解

401 – 禁止登录（要求用户身份认证）

403 – 权限不足，拒绝请求

5** --服务器错误

js的数据类型

值类型(基本类型)： 字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

var、let、const的区别

一、var声明的变量会挂载在window上，而let和const声明的变量不会：

二、var声明变量存在变量提升，let和const不存在变量提升

三、let和const声明形成块作用域

四、同一作用域下let和const不能声明同名变量，而var可以

五、暂存死区

var a = 100;

if(1){
    a = 10;
    //在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，
    // 而这时，还未到声明时候，所以控制台Error:a is not defined
    let a = 1;
}

六、const

1、一旦声明必须赋值,不能使用null占位。

2、声明后不能再修改

3、如果声明的是复合类型数据，可以修改其属性

js解释型、弱类型

变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 只有声明的变量会提升，初始化的不会。

ajax、axios、 async 、await

Ajax：数据交换，异步请求

axios：对ajax的再次封装

axios({
    method: "post",
    url: .....,//通常为外部定义的全局服务器地址，然后带上api接口
    data: (json或者formData),
    headers: {
        Authorization: getToken(),
        "Content-Type": "application/json(或者multipart/form-data)",
    },
})

在服务器发送请求和响应数据的时候，通常会配置request(请求)response（响应）拦截器

service.interceptors.request.use(
    request => {
           
        },
        error => {

        }
)

service.interceptors.response.use(
    response => {
           
        },
        error => {

        }
)

async

作为一个关键字放在函数的前面，表示该函数是一个异步函数

await

await关键字只能用在aync定义的函数内。是等待异步完成

预编译

通过多个例子来说明

https://www.jianshu.com/p/a91cddc5c705

闭包

//实现一个对Array的求和。通常情况下，求和的函数是这样定义的：
function sum(arr) {
    return arr.reduce(function (x, y) {
        return x + y;
    });
}

sum([1, 2, 3, 4, 5]); // 15
//如果不需要立刻求和，而是在后面的代码中，根据需要再计算怎么办？可以不返回求和的结果，而是返回求和的函数！
function lazy_sum(arr) {
    var sum = function () {
        return arr.reduce(function (x, y) {
            return x + y;
        });
    }
    return sum;
}
//当我们调用lazy_sum()时，返回的并不是求和结果，而是求和函数：
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum();
//调用函数f时，才真正计算求和的结果：
f(); // 15
//**注意一点，当我们调用lazy_sum()时，每次调用都会返回一个新的函数，即使传入相同的参数：
var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false

原型链

DOM和BOM

DOM是一套操作HTML标签的API（接口/方法/属性）

BOM是一套操作浏览器的API（接口/方法/属性）

计算属性

/* 计算属性
	把复杂的表达式抽取出来，使模板内容更加简洁

	计算属性与方法的区别
	1.计算属性使基于他们的依赖经行缓存的，数据不发生变化的话，
	会直接读取上一次的缓存
	2.方法不存在缓存
*/

钩子函数