Grit

Vue项目AliveNote踩坑

先放出项目地址:

AliveNote

技术栈: 后端使用Node.js + Express + MySQL+JWT+bcrypt加密+CORS跨域,前端使用:Vue 2 + TypeScript + Vue Router + Vuex

1、由于使用的是TS,ts并不识别vue文件,就要去d.ts文件中去声明,其他模块也可以这样

declare module '*.vue' {
    import Vue from 'vue';
    export default Vue;
}

2、把axios挂载到prototype上,在使用的时候会提示错误，但其实已经可以使用，已经挂载成功。

查到的解决方法：
1、手动告诉ts忽略这里的类型检测，既=>指定this为any类型:
(this as any).$axios
2、main.ts的同级目录创建一个xx.d.ts文件
declare module 'vue/types/vue' {
    interface Vue {
        $httpService: HttpService;
    }
}
3、使用vue-axios这个包来处理这个挂载问题
//main.ts中
Vue.use(VueAxios, axios)

3、封装axios拦截器，当中出现的问题

推荐的一个关于ts中axios的网站 拦截器管理类实现

//axios 拥有一个 interceptors 对象属性，该属性又有 request 和 response 2 个属性，它们对外提供一个 use 方法来添加拦截器，我们可以把这俩属性看做是一个拦截器管理对象。use 方法支持 2 个参数，第一个是 resolve 函数，第二个是 reject 函数，对于 resolve 函数的参数，请求拦截器是 **AxiosRequestConfig** 类型的，而响应拦截器是 **AxiosResponse** 类型的

/*
    我需要在拦截器中添加新属性，
*/
​```Ts
    export interface AxiosRequestConfig {
    //需要添加的新属性
        load: boolean;
    }

    export interface AxiosResponse<T = any> {
    /需要添加的新属性
        load: boolean;
    }
​```

4、$refs报错。

// 声明一$refs
  public $refs!: {
        ...
  };

5、forEach does not exist on NodeListOf;

//将NodeListOf转为array
Array.from(checkboxes).forEach((el) => { /* do something */});

6、$nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码; 
理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，

7、组件重载

8、使用EventBus的时候被多次触发

因为eventbus的生命周期是全局的，它不会随着你页面切换而重新执行生命周期，所以click下的clickHandler 会越来越多
这个$on事件是不会自动销毁的，需要我们手动来销毁；

在beforeDestroy中使用bus.$off
  beforeDestroy () {
    bus.$off('get')
  },
  
多个组件需要销毁的时候使用mixin简化

Vue项目AliveNote踩坑:https://dreamsakula.top/index.php/archives/75/