今年8月份进入前端重构组，用vue重构jq老工程，记录一下在重构过程中遇到的问题、解决方法和一些心得体会吧。项目技术栈：Vue + Vue-Router + Vuex， UI组件库用的有赞的vant

团队介绍：前端重构组共三人，我和一个同届的18年校招生，还有我们的师傅，我们师傅是一个有十年前端工作经验的前端大牛，师傅主要做项目架构和底层方法的封装，也做一些业务逻辑，我们两个主要是负责不同的业务模块、功能点的实现

一、知识点

1.组件通信Event Bus

这一节介绍了一种组件通信方式，详情戳这里

2.组件划分和插槽

这一节写的关于是组件划分和组件插槽solt的使用方法，详情戳这里

3.前端老司机得心应手的操作数组方法全在这里了

这一节主要是是数组的操作方法，详情戳这里

4.Vant 下拉刷新上拉加载组件

这一节做了一个下拉刷新，上拉加载的demo 详情戳这里

5.前端视为转变-从事件驱动到数据驱动

转载，之前用jq操作DOM头都晕了，重构用的vue终于可以不用去直接操作DOM了，推荐大家看看这篇文章，详情戳这里

6.混入mixins与extend

待补充：当多个页面要加入相同的js代码的话可以考虑使用，mixins和extend具有vue的生命周期方法

const test = {
  data () {
    return {
      a: 'just a test'
    }
  },
  create () {
    console.log('mixins creat')
    this.testFun()
  },
  mounted () {
    console.log('mixins mouted')
  },
  methods: {
    testFun () {
      console.log('this is testFun')
    }
  }
}

// 调用

mixins: ['test']

7.搭建UI组件平台

待补充：搭建一套UI组件，用NPM发布一期：icon、button、cell、dialog、input、checkbox、radio、loading、toast

8.npm命令自动生成页面

配置package.json 中npm命令，自动生成vue文件详情

9.统一接口请求拦截

待补充：配置项目请求方法

10.vuex的使用

待补充：vuex的使用方法

二、遇到的问题和解决方案

1.骨架屏与首包加载

问题描述： 一开始在页面中引入了骨架屏组件，但是首包加载js时间过长，导致骨架屏显示的作用不大后来使用了vue-skeleton-webpack-plugin，根据路由配置骨架屏，接口请求成功再隐藏掉骨架屏

解决方案： 类似这个文章

2.自定义指令更新问题

问题描述： 切换tab 自定义指令没有更新等问题

解决方案： 设置唯一的key 待补充

3.组件解耦与多参数传递问题

问题描述： 嵌套组件之间传参，用props、$emit 和event bus 的话会很复杂

解决方案： 准备用 $attrs和与 $listeners，或者是provide、inject ，组件拆分颗粒度的话是一个值得思考的内容，组件如果拆的太散的话，组件通信就会变得很复杂，但是拆分组件又可以减少代码耦合度，怎么样才是最优解，要根据实际的业务场景来决定。

4.修改对象数组中对象属性值

问题描述： 数组层级过深，修改对象数组中对象属性值，视图没有立即更新

解决方案：

方案1：用$set
this.$set(this.numbers,index,1);
方案2：用$nextTick
vm.$nextTick( [callback] )
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
this.$nextTick(function () {
    console.log('2')
  })
方案3：vue数组变异
[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
方案4：强制刷新
vm.$forceUpdate()
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

5.页面下拉刷新

问题描述： 页面下拉刷新执行页面的初始化方法，子组件没有跟着更新

解决方案： 暂时解决方案，刷新<app> 会导致页面闪动，有同事提出让子组件能够监听到下拉事件，执行子组件的初始化方法

三、总结

问题不大，不要慌
复杂情况多想想，可以画个图梳理一下，想好再动手
再难的问题也是有解决问题，一定要冷静分析
有些问题其实是可以通过运营手段规避的
有些东西其实是可以商量的，就看你是不是只知道敲代码
有效的沟通可以让你少走冤枉路
看官网，最想让你看懂的人就是这个"东西"的"制作者"
底子要扎实，才能走的更远
吾日三省吾身，多尝试新的东西，不要天天重复写之前的内容
未完待续。。。

前端VUE重构之路

一 、知识点