vue2升级vue3踩坑记录（二）mixins 和 vue-router

Ant Design of Vue的V2版本的坑

这里面按照文档改就行了，唯一比较坑的点是Ant Design of Vue的V2版本，表单校验如果设置为required,表单值是数字的类型的话，就会校验不通过。V3版本已经解决了这个问题，直接使用V3版本即可。

mixins的变化

vue2中的选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

vue3中的选项合并

此外，当来自组件的 data() 及其 mixin 或 extends 基类被合并时，合并操作现在将被浅层次地执行：

我升级的系统，有大概一百个页面使用了一个自己定义集成了表单、请求、表格 通用方法的mixin,并且data的嵌套层次至少是3级，data格式大概如下

// curdMixin.js
export default {
  data() {
    return {
      table: {
        colums: [],
        data: [],
        pagination: {
          pageSize: 10,
          pageIndex: 1
        }
      },
      form: {
        data: {},
        rules: {}
      },
      request: {
        requestFunc: null,
        list: {
          requestFunc: null,
          loading:false,
          config: {
            params: {},
            data: {},
            path: "",
            filter: {}
          }
        }
      }
    };
  }
};

由于vue2是递归合并，页面中只需要配置和公共参数不同的地方就可以，如下：

import curdMixin from './curdMixin'
// 页面中的data
export default {
  mixins:[curdMixin],
  data() {
    return {
      table: {
        colums: [{ dataIndex: "", title: "" }]
      },
      request: {
        requestFunc: () => {}
      }
    };
  }
};

当时用起来很爽，但是升级vue3以后，浅合并导致很多页面因为缺少参数报错无法运行。这是个老项目，把每个页面的mixin data选项补充完整工作量很大，而且重复代码比较多。
权衡之下于是我换了个方法，把curdMixin 改造如下
lodash工具类的merge方法支持递归合并，使用merge方法模拟vue2的递归方法

// curdMixin.js
import { merge } from "lodash";
export default (data = {}) => ({
  data() {
    return merge(
      {
        table: {
          colums: [],
          data: [],
          pagination: {
            pageSize: 10,
            pageIndex: 1
          }
        },
        form: {
          data: {},
          rules: {}
        },
        request: {
          requestFunc: null,
          list: {
            requestFunc: null,
            loading: false,
            config: {
              params: {},
              data: {},
              path: "",
              filter: {}
            }
          }
        }
      },
      data
    );
  }
});

页面中使用的时候如下

import curdMixin from './curdMixin'
// 页面中的data
export default {
  mixins: [
    curdMixin({
      table: {
        colums: [{ dataIndex: "", title: "" }]
      },
      request: {
        requestFunc: () => {}
      }
    })
  ],
  data() {
    return {};
  }
};

这样写算是升级工作量比较小的，唯一不好的一点就是在vue2.0中的使用this给data默认赋值的写法就只能放到生命周期里去执行

// vue2中的使用this给某些data赋初始值
export default {
  props:['a'],
  data() {
    return { 
      form: {
        data: {a: this.a, title: ""} // 
      }
    };
  }
}

// mixin中merge方法调用的时候还访问不到this，上述写法会报错，所以放到生命周期里赋值
export default {
  props:['a'],
  mixins: [
    curdMixin({
      form: {
        data: { a: "", title: "" }
      }
    })
  ],
  data() {
    return { };
  },
  created(){
  // 在生命周期里赋值
    this.form.data.a = this.a
  }
}

另外就是给个忠告，使用对象的时候不要搞那么多层数据嵌套（树状格式的数据除外），无论从取值，赋值，拷贝都很让人头疼，害人害己啊！！！

vue-router的大坑

我在升级的时候vue-router最新版本是 4.1.3版本。升级完以后页面能正常运行。但是由于我的vue-router依赖版本配置如下：

如果重新注册依赖，vue-router会下载4.0.15版本及以后的最新版本。
不知道什么时候vue-router搞了个4.1.6版本，该版本废弃了使用name编程式导航传参参数params，

然后导致页面导航成功后，好多参数没了。控制台报如下警告：

Discarded invalid param(s) “name“, “age“ when navigating

由于我已经有好多页面使用上面标红的方式导航传参，改起来太费劲了，就放弃使用4.1.6版本了。于是的修改了我的依赖配置如下