父beforeUpdate ->子beforeUpdate ->子updated ->父updated
父组件更新,子组件一定会重新渲染,但子组件重新渲染只会走它的beforeUpdate和uptated这些周期函数,data不会重新执行,如果刚开始第一次渲染的时候,把属性都挂载到当前组件的data中,只有第一次渲染子组件才会执行,不管以后对子组件怎么刷新都不起作用
父组件
<template>
<div id="app">
<son :n='n' :m='m'></son>
</div>
</template>
<script>
import son from './son.vue';
export default {
components: { son },
data() {
return {
n:0,
m:0
};
},
mounted(){
// 让父组件的状态更新
setInterval(() => {
this.n=100;
this.m=200;
}, 2000);
}
};
</script>
子组件
<template>
<div>
{{ A }}====={{ B }}
</div>
</template>
<script>
export default {
props:['n','m'],
//=>父组件更新,子组件重新渲染的时候data函数不会再执行(只有第一次渲染子组件,在beforeCreate和created中间的时候执行一次)
data() {
return {
A:this.n,
B:this.m
};
},
};
</script>
解决办法
方案一:使用v-if控制组件有还是没有,对应的就是销毁和渲染
/* ==============父组件============== */ <template> <div id="app"> <son :n='n' :m='m' v-if="flag"></son> </div> </template> <script> import son from './son.vue'; export default { components: { son }, data() { return { n: 0, m: 0, flag: true }; }, mounted() { // 让父组件的状态更新 setInterval(() => { this.flag = false;//组件没有了代表销毁了, this.n = 100; this.m = 200; this.$nextTick(() => { this.flag = true;//销毁之后重新渲染,走的是子组件的整套周期函数 }) }, 2000); } }; </script> /* ==============子组件============== */ <template> <div>{{ A }}====={{ B }} </div> </template> <script> export default { props: ['n', 'm'], data() { return { A: this.n, B: this.m }; }, }; </script>
方案二:使用计算属性
方案三:子组件直接使用props中的属性
方案四:使用普通方法
/* ==============父组件============== */ /* ==============子组件============== */ <template> <div> {{ A }}====={{ B }} //不起作用 {{ M }}====={{ N }} //使用计算属性 {{ n }}====={{ m }} //直接使用props中的属性 {{ A() }}====={{ B() }} //使用普通方法 </div> </template> <script> export default { props: ['n', 'm'], computed: { M() { return this.m; }, N() { return this.n; } }, methods: { A() { return this.n; }, B() { return this.m; } }, data() { return { A: this.n, B: this.m }; }, }; </script>
方案五:使用watch监听data中的状态
/* ==============父组件============== */ /* ==============子组件============== */ <template> <div> </div> </template> <script> export default { data() { return { n: '', }; }, watch: { //=>当vuex中的数据发生改变,我们把自己的result的状态也改变 ["$store.state.custom.myList"](val) { //=>val就是vuex中state中的数据 this.n = val; }, }, }; </script>