关于Vue生命周期调用次数的问题

Question

除了启动组件App.vue，为什么其他组件的mounted，created在第一次启动时生命周期函数都是被调用2次？

组件Message-center.vue：

<template>
    <div id="msg-center">
        <div class="input-wrap">
            <div class="form-group">
                <label for="msgInput">Message: </label>
                <textarea type="text" id="msgInput" class="form-control" rows="8" v-model="msg"></textarea>
            </div>
            <div class="form-group send-btn-div">
                <input type="button" value="Send" class="btn btn-primary" id="sendBtn" @click="sendMsg">
            </div>
        </div>
        <div class="msg-list-wrap">
            <h2>Message Lists ({{num}})</h2>
            <message-list :msg-obj="msgObj"></message-list>
            <div v-show="msgObj.msgArr.length == 0" class="no-data">no data...</div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';

    import service from '../services/services';
    import MessageList from './Message-list';
    import model from '../common/global';

    Vue.filter('time', function (val) {
        return new Date(val).toLocaleString();
    });
    export default {
        ......
        methods: {
            .....
            getMsgList() {
                service.getMsgList(localStorage.userName)
                    .then(res => {
                        this.msgObj.msgArr = res.data;
                    })
                    .catch(err => console.log(err));
            }
        },
        mounted() {
            this.getMsgList(); //调用了2次
            console.log(1); //调用了2次
        }
    }
</script>

控制台信息：

dev-server.js:60[HMR] Waiting for update signal from WDS...
vue.runtime.common.js:6111 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
Message-center.vue:71 1
Message-center.vue:71 1
client:37 [WDS] Hot Module Replacement enabled.

Answer 1

请问楼主问题找到了吗 我也是遇到了相同的问题 created 发送 ajax 会请求两次,通过if设置flag标记,强制转成1次请求,但是数据是获取到了,页面不进行DOM 更新

Answer 2

这个issues里面看到的，你用了Vue.mixin 的话，或者vue-router（里面有Vue.mixin）,就会跑两次生命周期。

Answer 3

我也遇到相同的问题，
[HMR] Waiting for update signal from WDS，
这个出现了四次，
并且我在mounted里面取this.$router.query,都取不到值,
请问这个怎么解决？

Answer 4

同求解 刚入手vue2.0对生命周期在 页面初次运行和 点击跳转后再次返回时，生命周期的调用

Answer 5

请问解决了吗？我也遇到这个问题了，一直解决不了