mounted 只调用了两次
来源：4-5 非父子组件间的传值
Seagull8796540
2021-01-03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<child content="Dell"></child>
<child content="Lee"></child>
</div>
<script>
Vue.prototype.bus = new Vue()
Vue.component('child', {
data() {
return {
selftContent:this.content
}
},
props:{
content:String
},
template:'<div @click="handleClick">{{selftContent}}</div>',
methods:{
handleClick() {
this.bus.$emit('change', this.selftContent)
}
},
mounted(){
console.log('outer');
this.bus.$on('change',msg => {
console.log('inner');
this.selftContent = msg
} )
}
})
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
页面加载的时候，console.log('outer'); 打印了两个 outer
这个我可以理解，mounted 函数被调用了两次， 因为父组件里头我们用了两个子组件。 我每一次点击 子组件的时候，根本没打印出来 outer, 也就是说 mounted 函数根本没被调用，但是， 打印了两个 inner，也就是说 mounted方法里面的
this.bus.$on('change',msg => {
console.log('inner');
this.selftContent = msg
} )
执行了两次
点击Dell 或者Lee的时候， 可以看到变化， Lee 变成 Dell 或者Dell 变成Lee。
我要问的问题是 mounted 这个函数除了第一次页面加载的时候被调用以外， 我点击子组件的时候没被调用， 但是 这个mounted函数里面的
this.bus.$on('change',msg => {
console.log('inner');
this.selftContent = msg
} )
这部分代码都执行了
这个怎么理解？
2 . 子组件里头我为什么要用mounted， mounted 这个函数页面刚加载的时候只被调用一次， 我可以这么理解吗？
那我们点击子组件的时候，我们希望有变化， 那我们为什么不用 beforeUpdate,update 这样数据更改的时候用的的函数呢？
写回答
1回答
-
Dell
2021-01-05
我的代码也只会执行一次，这块mounted 只会在显示组件的时候调用一次，永远只会调用一次
mounted 能够确保页面的DOM已经渲染完毕了，而且在SSR中，有些生命周期函数是保留的，所以建议直接用mounted就可以了
052021-01-11
相似问题