vue1.x到2.x的迁移

2018-03-27 本文已影响0人 __橘生淮南

年后的第一项工作任务，就是对一个挺复杂的项目进行vue迁移，也是为了后续的更新，看了官方文档，安装了迁移工具vue-migration-helper，就哼哧哼哧地干起来了。

兴冲冲直接在根目录下运行vue-migration-helper，吓到了，几千条修改内容，措手不及，顿时意识到这是项艰巨的任务。果断老老实实一个目录一个目录开始迁移，以下是总结的需要迁移的point。

router.go ——> router.push
v-for="(inx,item) in datas" ——> v-for="(item,inx) in datas" :key="inx"参数顺序交换，添加key值
关于事件
废弃了$broadcast和$dispatch，用$emit和$on代替，如果是同一个组件，或是父子组件，比较容易触发事件，但我们常常会遇到一个情形是，对于同一个事件，多个组件都定义了不同的回调函数，这个时候就可以考虑使用全局的事件管理器，在main.js文件中定义一个Vue.prototype.eventBus = new Vue();所有的事件都可以通过this.eventBus.$on和this.eventBus.$emit来注册和触发。
父子组件的通信。在1.x中子组件可以直接操作父组件通过prop传过去的值，在2.0中废弃了.sync，但2.3中又加回去了，vue-migration-helper只针对2.0,害得我费力改了半天，越来越绝望，终于在濒临崩溃的时候发现了2.3恢复了，欢天喜地又改回去。

// 父组件
<Child :value.sync="value"></Child>
// 子组件
this.$emit('update:value', updateValue);

v-el和v-ref都统一用ref=xxx，通过this.$refs.xxx取值。但需要注意的是，$refs不是响应式的，所以要在挂载完成后再取值，或者监听变化，这个我也花了不少时间去改。
ready mounted

mounted() {
  this.$nextTick(() => {
  ...
  })
}

v-link改成<router-link :to="/xxx"></router-link>
双向过滤器
!!改到要吐血的东西，之后排查的bug几乎全都是因为这个引起的

//1.x
<input v-model="value | formatValue" />

filters: {
   formatValue: {
      read(val) {
      },
      write(val) {
      }
    }
}

//2.x
第一种方式：使用computed计算属性
<input v-model="computedValue" />

computed: {
   computedValue: {
      get() {
      },
      set(val) {
      }
    }
}
但一个页面就是几十个这样的，也是受不了。
第二种方式：单独封装成一个组件，在内部处理，把过滤器当做一个函数直接传进去

实施过程中总有一些艰难的问题，不详说，希望以后能遇到像1.x中那么灵活的方式。

废弃events方法，所有的自定义事件都添加到created函数里面。

我所遇到的主要就是以上几点，另外还有vue-router从0.7.x的迁移，照着文档依葫芦画瓢就好。

前前后后花了一周的时间才迁移好，之后又随时坚守岗位，检查bug。

vue1.x到2.x的迁移

猜你喜欢

热点阅读