Vue 1 to Vue2 那些事

发表于 | 更新于: | 分类于 | 阅读次数:
字数统计: 944 字 | 阅读时长 ≈ 5 分钟

总访客数量

ue api 2

vue-router api 2

从 Vue 1.x 迁移

从 Vue Router 0.7.x 迁移

Vue 2.0 Changes

使用vue提供的 迁移工具 vue-migration-helper 可以检测出问题，

1
2
3
4
5
6
7
8
9
10
11
12
 
# install
npm install --global vue-migration-helper
 
# navigate to a Vue 1.x project directory
cd path/to/my-vue-project
 
# scan all files in the current directory
vue-migration-helper
# scan all files in specific sub-directories
vue-migration-helper src folder-a folder-b
# scan a specific file or files
vue-migration-helper src/app.vue

下面说一些主要的问题

app.js

  • 创建vue实例使用new的方式
  • 定义的router在创建实例时加入
  • ready方法的替换

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
 
const app = new Vue({
    data() {
        return {
            isHome: false
        };
    },
    router: router,
    mounted() {
        this.$nextTick(function() {
        })
    }
}).$mount('#app')

\/*.vue

  • for循环没有$index
  • 当循环router-link时要在外层循环template，否则会阻碍属性:to的使用

代码如下

1
2
3
 
<div class="list" v-for="(mlist, index) in media_lists" :class="{'active':index==0}">
    <!-- -->
</div>
  • 组件template下只能有一个节点
  • 继承的变量不能在data里面重复写
  • 事件传递问题

经过多少次的实验，最后的解决方案是vuex来进行状态管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
// store.js
export default new Vuex.Store({
    state: {
        loading: false
    },
    mutations: {
        load_show(state) {
            state.loading = true;
        },
        load_hide(state) {
            state.loading = false;
        }
    }
})
  
// app.js
import store from './store';
    // ...
const app = new Vue({
    data() {
        return {
            isHome: false
        };
    },
    store,
    router: router,
    mounted() {
        this.$nextTick(function() {
        })
    }
}).$mount('#app')
 
 
// ryLoading.vue
<template>
    <div class="w-loading" v-if="loading">
        <div class="icon"></div>
    </div>
</template>
<script lang="babel">
export default{
    data() {
        return {
        }
    },
    computed: {
        loading () {
            return this.$store.state.loading
        }
    },
    watch: {
         
    },
    mounted() {
        this.$nextTick(function() {
        })
    }
}
</script>
  
//list.vue
this.$store.commit("load_show");
this.$store.commit("load_hide");
  • select for循环问题，代码如下
1
2
3
4
5
 
<select v-model="content" class="select">
    <template v-for="(item, index) in contentSel">
        <option v-bind:value="item">{{item}}</option>
    </template>
</select>

接下来是最重要的vue-router2，感觉灰常难搞

router.js

  • new VueRouter创建参数的变化
  • 子路由使用children，且是一个数组，原来是一个对象
  • router-view 状态切换使用transition标签，切换自定义样式添加-active
  • 路由重定向方式的变化 见vue-router api 2
  • 首页path为空时，导航栏显示激活状态异常，非home时覆盖激活的样式。

代码如下

app.js中内容

1
2
3
4
5
 
import routerMap from './router'
var router = new VueRouter({
    mode: 'history',
    routes: routerMap()
});

router.afterEach 参数变化（参数title在meta中）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
router.afterEach((to, from) => {
     
    router.app.isHome = to.name.indexOf('home') == 0 ? true : false;
    var fromHome = (from && from.name && from.name.indexOf('home') == 0) ? true : false;
    if (to.meta.title) {
        document.title = to.meta.title;
    }
    if(!router.app.isHome){
        window.scrollTo(0, 0);
    }else if(router.app.isHome && fromHome){
        var el = to.query && to.query.el;
        var posY =  el ? $(el).offset().top : 0;
        window.scrollTo(0, posY);
    }
});

router.js（自定义参数title放在meta中、path除了根节点，其他都不加 “/”）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
export default function(){
    var routerMap = [{
        path: prefix(),
        component: require('business/business'),
        name: MODULE_NAME,
        children: [
            {
                path: '',
                name: 'home',
                alias: '/',
                meta: {title: '首页'},
                component: function(resolve){
                    require.ensure(['business/home/home'], function(){
                        require(['business/home/home'], resolve);
                    }, 'home')
                     
                }
            },
            {
                path: 'products',
                name: 'products',
                component: Vue.extend({
                    template: '<div class="p-products"><transition name="fade" mode="out-in"><router-view></router-view></transition></div>'
                }),
                children: [
                    {
                        path: 'pos',
                        meta: {title:'容易POS'},
                        name: 'products.pos',
                        component: function(resolve){
                            require.ensure(['business/products/pos/pos'], function(){
                                require(['business/products/pos/pos'], resolve);
                            }, 'products.pos')
                        }
                    }
                ]
            }
        ]
    }];
 
    function prefix(path=''){
        if(path == '*'){
            return path;
        }
        if(ENV == 'online' || ENV == 'pre_online'){
            if(path){
                return path;
            }else{
                return '/';
            }
        }else{
            return '/' + MODULE_NAME + path;
        }
         
    }
     
    return routerMap;
}

css

1
2
3
 
.fade-leave-active {
    opacity: 0;
}

v-link => router-link 标签

样式变化router-link-active、标签变化

需要注意to=””和:to=”{}”的区别

router-link api