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

Posted 2020-08-27 核桃大号

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用Vue中遇到的问题和处理方法相关的知识，希望对你有一定的参考价值。

用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("creat以上是关于用Vue中遇到的问题和处理方法的主要内容，如果未能解决你的问题，请参考以下文章 
 在 Python 多处理进程中运行较慢的 OpenCV 代码片段
 使用 Vue 模板清晰地分离视图和代码
 如何在 Vs Code 中更改默认自动选择的用户片段行为
 回归 | js实用代码片段的封装与总结（持续更新中...）
 Vue报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段
 vue 事件处理器