首页 > 代码库 > 用Vue中遇到的问题和处理方法(一)

用Vue中遇到的问题和处理方法(一)

2024-09-01 01:41:06   216人阅读

   用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧:

  • 测试部抛出问题一:在Vue1.0路由vue-router中,当点击菜单一个组件加载出来表格列表,输入查询条件查询,当在单击这个菜单后表格的数据没有重置查询条件和查询结果.

        原因分析:Vue路由在页面渲染一个组件后加载后,再加载这个组件,组件不会摧毁后在重新生成这个组件,不会重新触发组件的生命周期中的方法.代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <title>learning vue</title>
</head>
<body>

<div id="app-container">
    <ul>
        <li v-for="item in $root.list">
            <a v-link="{ path: ‘/lang/‘ + item.id }">{{ item.name }}{{para}}{{params}}</a>
        </li>
    </ul>
    <router-view :params="params"></router-view>
</div>


<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<script>
    Vue.config.debug = true;
    Vue.use(VueRouter);
    var AppComponent = Vue.extend({
        data: function(){
            return {
                params:111,
                list: [
                    { id: ‘10001‘, name: ‘C#‘, message: ‘Hello C#‘ },
                    { id: ‘10002‘, name: ‘Java‘, message: ‘Hello Java.‘ },
                    { id: ‘10003‘, name: ‘C++‘, message: ‘Hello C++‘ },
                    { id: ‘10004‘, name: ‘JavaScript‘, message: ‘Hello JavaScript‘ }
                ]
            };
        }
    });
    var LangDetailComponent = Vue.extend({
        template: `<div><h1>{{ model.name }}</h1><p>{{ model.message }}</p></div>`,
        computed: {
            model: function(){
                var list = this.$root.list;
                var id = this.$route.params.id;
                for(var i = 0; i < list.length; i++){
                    if(list[i].id === id){
                        return list[i];
                    }
                }
            }
        },
        init:function () {
            alert("init");
        },
        created:function () {
            alert("created");
        },
        beforeCompile:function () {
            alert("beforeCompile");
        },
        compiled:function () {
            alert("compiled");
        },
        ready:function () {
            alert("ready");
        },
        attached:function () {
            alert("attached")
        },
        detached:function () {
            alert("detached")
        },
        beforeDestroy:function () {
            alert("beforeDestroy")
        },
        destroyed:function () {
            alert("destroyed")
        }

    });

    var router = new VueRouter();
    router.map({
        ‘/lang/:id‘: { component: LangDetailComponent }


    });
    router.start(AppComponent, ‘#app-container‘);
</script>

</body>
</html>

执行效果:

技术分享

着三个路由都是同一个组件,但点击其他的时候组件中的所有生命周期的方法都没有调用,去vue-router的api上看没有找到重新加载路由的配置配置项.

在实际开发中这个问题在两个菜单共用一个组件,设置传参来判断加载不同的数据的情况下,会出现另一个ready方法不走导致数据显示不真确.解决思路可以加监听路由地址触发ready事件.

而上面的解决方法是用v-if来重新加载组件,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <title>learning vue</title>
</head>
<body>

<div id="app-container">
    <ul>
        <li v-for="item in $root.list">
            <a  href="javascript:void(0)" @click="click(item.path)">{{ item.name }}</a>
        </li>
    </ul>
    <router-view v-if="show"></router-view>
</div>


<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<script>
    Vue.config.debug = true;
    Vue.use(VueRouter);
    var AppComponent = Vue.extend({
        data: function(){
            return {
                show:true,
                list: [
                    { id: ‘10001‘, name: ‘C#‘, message: ‘Hello C#‘,path:"/lan"},
                    { id: ‘10002‘, name: ‘Java‘, message: ‘Hello Java.‘,path:"/lan1"},
                    { id: ‘10003‘, name: ‘C++‘, message: ‘Hello C++‘ ,path:"/lan2"},
                    { id: ‘10004‘, name: ‘JavaScript‘, message: ‘Hello JavaScript‘,path:"/lan3" }
                ]
            };
        },
        methods:{
            click:function (path) {
                debugger;
                if(window.location.hash.replace("#!","")==path){
                    this.show=false;
                    Vue.nextTick(function () {
                        this.show=true;
                    }.bind(this))
                }else{
                    this.$router.go({path:path});
                }
            }
        }
    });
    var LangDetailComponent = Vue.extend({
        template: `<div><h1>C#</h1><p>232323</p></div>`,
        computed: {
            model: function(){
                var list = this.$root.list;
                var id = this.$route.params.id;
                for(var i = 0; i < list.length; i++){
                    if(list[i].id === id){
                        return list[i];
                    }
                }
            }
        },
        init:function () {
            alert("init");
        },
        created:function () {
            alert("created");
        },
        beforeCompile:function () {
            alert("beforeCompile");
        },
        compiled:function () {
            alert("compiled");
        },
        ready:function () {
            alert("ready");
        },
        attached:function () {
            alert("attached")
        },
        detached:function () {
            alert("detached")
        },
        beforeDestroy:function () {
            alert("beforeDestroy")
        },
        destroyed:function () {
            alert("destroyed")
        }

    });
    var LangDetailComponent1 = Vue.extend({
        template: `<div><h1>Java</h1><p>Hello Java.</p></div>`,
        computed: {
            model: function(){
                var list = this.$root.list;
                var id = this.$route.params.id;
                for(var i = 0; i < list.length; i++){
                    if(list[i].id === id){
                        return list[i];
                    }
                }
            }
        },
        init:function () {
            alert("init");
        },
        created:function () {
            alert("created");
        },
        beforeCompile:function () {
            alert("beforeCompile");
        },
        compiled:function () {
            alert("compiled");
        },
        ready:function () {
            alert("ready");
        },
        attached:function () {
            alert("attached")
        },
        detached:function () {
            alert("detached")
        },
        beforeDestroy:function () {
            alert("beforeDestroy")
        },
        destroyed:function () {
            alert("destroyed")
        }

    });
    var LangDetailComponent2 = Vue.extend({
        template: `<div><h1>C++</h1><p>Hello C++</p></div>`,
        computed: {
            model: function(){
                var list = this.$root.list;
                var id = this.$route.params.id;
                for(var i = 0; i < list.length; i++){
                    if(list[i].id === id){
                        return list[i];
                    }
                }
            }
        },
        init:function () {
            alert("init");
        },
        created:function () {
            alert("created");
        },
        beforeCompile:function () {
            alert("beforeCompile");
        },
        compiled:function () {
            alert("compiled");
        },
        ready:function () {
            alert("ready");
        },
        attached:function () {
            alert("attached")
        },
        detached:function () {
            alert("detached")
        },
        beforeDestroy:function () {
            alert("beforeDestroy")
        },
        destroyed:function () {
            alert("destroyed")
        }

    });
    var LangDetailComponent3 = Vue.extend({
        template: `<div><h1>JavaScript</h1><p>Hello JavaScript</p></div>`,
        computed: {
            model: function(){
                var list = this.$root.list;
                var id = this.$route.params.id;
                for(var i = 0; i < list.length; i++){
                    if(list[i].id === id){
                        return list[i];
                    }
                }
            }
        },
        init:function () {
            alert("init");
        },
        created:function () {
            alert("created");
        },
        beforeCompile:function () {
            alert("beforeCompile");
        },
        compiled:function () {
            alert("compiled");
        },
        ready:function () {
            alert("ready");
        },
        attached:function () {
            alert("attached")
        },
        detached:function () {
            alert("detached")
        },
        beforeDestroy:function () {
            alert("beforeDestroy")
        },
        destroyed:function () {
            alert("destroyed")
        }

    });

    var router = new VueRouter();
    router.map({
        ‘/lan‘: { component: LangDetailComponent },
        ‘/lan1‘: { component: LangDetailComponent1 },
        ‘/lan2‘: { component: LangDetailComponent2 },
        ‘/lan3‘: { component: LangDetailComponent3 }
    });
    router.start(AppComponent, ‘#app-container‘);
</script>

</body>
</html>

效果是:

技术分享

 

这样在点相同的菜单,组件就重新加载,后面想优化每个菜单都加click,菜单很多话对页面是性能消耗,下篇想用vue能不能用事件委托绑定单击事件.暂时先写到这里.

这里在多说一句,Vue的路由是hash路由,所以要回去路由地址可以用 window.location.hash.replace("#!","")来获取.不知道hash路由的可以百度下,这里就不多说了

用Vue中遇到的问题和处理方法(一)


联系
我们