【vue.js】生命周期和 bus.$on事件被多次绑定

最新推荐文章于 2023-11-06 14:09:52 发布

Nazgul丶戒灵

最新推荐文章于 2023-11-06 14:09:52 发布

阅读量905

点赞数

分类专栏： VUE 文章标签： vue中bus.$on事件被多次绑定 vue.js生命周期

本文链接：https://blog.csdn.net/chuxuan0215/article/details/102695582

版权

VUE 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

记录一下周期问题，是因为$on()多次触发导致的，所以先解决一下$on()多次绑定问题

vue中bus.$on事件被多次绑定

问题描述：只要页面没有强制刷新，存在组件切换，bus.$on方法会被多次绑定，造成事件多次触发

解决办法一：在每次调用方法前先解绑事件( bus.$off )，然后在重新绑定( bus.$on )

bus.$off('pagechangep'); //先解绑，不然会多次出发
bus.$on('pagechangep',function(i){
      that.publishpageTo(i);
});

解决办法二：注册的总线事件（Bus）要在组件销毁时(beforeDestroy/destroyed)卸载，否则会多次挂载，造成触发一次但多个响应的情况

beforeDestroy () {
  bus.$off("backUpLevel");
}

----------------------------------------------------分割线 ----------------------------------------------------

【vue.js】生命周期——beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDesotry、destoryed

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app" ref="app">
        {{ name }}
    </div>
</body>
    <script>
        let vm=new Vue({
            el:"#app",
            data:{
                name:"liuting",
            },
            beforeCreate(){
                console.log("创建前：");
                console.log(this.$el);
                console.log(this.$data);
            },
            created(){
                console.log("创建完成：");
                console.log(this.$el);
                console.log(this.$data);
            },
            beforeMount(){
                console.log("挂载前：");
                console.log(this.$el);
                console.log(this.$data);
            },
            mounted(){
                console.log("挂载完成：");
                console.log(this.$el);
                console.log(this.$data);
            },
            beforeUpdate(){
                console.log('=即将更新渲染=');
                let name = this.$refs.app.innerHTML;
                console.log('name:'+name);
            },
            updated(){
                console.log('==更新成功==');
                let name = this.$refs.app.innerHTML;
                console.log('name:'+name);
            },
            /*beforeDestory(){
                console.log("销毁前：");
            },
            destoryed(){
                console.log("销毁完成：");
            }*/
        });
    </script>
</html>

Nazgul丶戒灵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【vue.js】生命周期和 bus.$on事件被多次绑定

记录一下周期问题，是因为$on()多次触发导致的，所以先解决一下$on()多次绑定问题vue中bus.$on事件被多次绑定问题描述：只要页面没有强制刷新，存在组件切换，bus.$on方法会被多次绑定，造成事件多次触发解决办法一：在每次调用方法前先解绑事件( bus.$off )，然后在重新绑定( bus.$on )bus.$off('pagechangep'); //先解...
复制链接

扫一扫