Vue关于父组件更新子组件子组件不重新渲染最新数据的问题

父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>