需要升级的包列表

1
2
3
4
5
npm i [email protected] --save
npm i [email protected] --save
npm i [email protected] --save
npm i [email protected] --save
npm i [email protected] --save-dev

下面概括一些比较常用语法的修改

Vue

basic

​ Migration from Vue 1.x

​ 官方文档已经很详细了

ready

1
2
3
4
5
mounted() {
    this.$nextTick(() => {
       // ready
    })
}

filter

现在filter只在{{}}中生效，推荐使用计算属性或者方法，比较不爽的一个点

transition

1
2
3
4
5
6
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

Vue-Router

basic

vue-router 2

添加了全局和离开当前页的钩子，更灵活了

​ 个人感觉不是很方便，特别是<router-link tag="a"></router-link>这样的用法

route data

1
2
3
4
5
beforeRouteEnter (to, from, next) => {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

Vuex

basic

vuex 2.0

getters

1
2
3
4
5
6
7
8
vuex: {
 -      getters: {
 -        posts: state => state.posts
 -      },
 -      actions: {
 -        getPost
 -      }
 }

改为

1
2
3
4
5
6
7
8
9
10
11
import { mapGetters, mapActions } from 'vuex'
   computed: {
 +    ...mapGetters([
 +      'posts'
 +    ]),
   }
    methods: {
 +    ...mapActions([
 +      'getPost'
 +    ]),
   }