Vue双向数据绑定原理

采用“数据劫持”结合发布者-订阅者模式，通过Object.definedProperty()的setter和getter来劫持data的各个属性，当数据变化时，通知订阅者，来触发相应的监听回调。

Vue如何监听数组的变化

使用函数劫持的方式，重写了数组的方法 Vue 将 data 中的数组，进行了原型链重写。指向了自己定义的数组原型方法，这样当调用数组 api 时，可以通知依赖更新.如果数组中包含着引用类型。会对数组中的引用类型再次进行监控

Vuex

Vuex是Vue的状态管理模式，相当于一个共享仓库，其他页面可以访问这个仓库；

Vuex里面有五个属性：

State：存储数据；组件使用 store.state. 获取数据。

Getters: 获取数据，相当于state计算属性( computed ),通过this.$store.getters.获取。

Mutations: 唯一能修改store状态的方式，同步函数, this.$store.commit(方法名，值)。

Actions: 提交Mutations修改的数据，异步操作。

Module: 将 state 分成多个 modules，便于管理

axios拦截器

请求拦截器：相当于一种请求检测机制，只有通过该检测的请求才能被发送。
响应拦截器：相当于一种响应检测机制，只有通过该检测的响应才能被返回。

//通过axios请求拦截器
axios.interceptors.request.use(config=>{
//为请求头对象，添加token验证的Authorization字段
config.headers.Authorization = window.sessionStorage.getItem(‘token’)
return config
})
复制代码

js数据类型判断引用数据类型

基本数据类型：Number、String、Boolean、Null、Undefined、Symbol(ES6新增)、BigInt(ES11新增)；

引用数据类型：Function、Array、Object、Date、RegExp。

基本数据类型存在栈中，引用数据类型存在堆中，其指针存在栈中。

判断基本数据类型: typeof

判断数组:Array.isArray()

判断引用数据类型：

instanceof(左边必须是对象)

instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上

Object.prototype.toString.call()

继承

借用构造函数：子类构造函数中使用call()或apply()
原型链继承：父类的实例作为子类的原型
组合继承：结合前两者的优点
原型式继承：利用空对象为中间，将对象赋值给空对象构造函数的原型（浅复制）
寄生式继承：使用原型式继承对一个目标对象进行浅复制，增强这个浅复制的能力
寄生组合继承：结合借用构造函数传递参数和寄生模式实现继承

防抖、节流

防抖

任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

 // 防抖功能函数，接受传参
    function debounce(fn) {
      // 创建一个标记用来存放定时器的返回值
      let timeout = null;
      return function() {
        // 每次当用户点击/输入的时候，把前一个定时器清除
        clearTimeout(timeout);
        // 然后创建一个新的 setTimeout，保证点击按钮后的 interval 间隔内
        // 如果用户还点击了的话，就不会执行 fn 函数
        timeout = setTimeout(() => {
          fn.call(this, arguments);
        }, 1000);
      };
    }
复制代码

节流

指定时间间隔内只会执行一次任务。

    function throttle(fn) {
      // 通过闭包保存一个标记
      let canRun = true;
      return function() {
        // 在函数开头判断标志是否为 true，不为 true 则中断函数
        if(!canRun) {
          return;
        }
        // 将 canRun 设置为 false，防止执行之前再被执行
        canRun = false;
        // 定时器
        setTimeout( () => {
          fn.call(this, arguments);
          // 执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
          canRun = true;
        }, 1000);
      };
    }
复制代码