记录一下周期问题,是因为$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>