动态组件 & 异步组件

组件根据传入的数据动态产生DOM结构, 只操作数据便可以重新渲染页面, 路由相同时页面不重新渲染或更新
一、当数据通过异步操作后，对之前加载的数据进行变更后，发现数据不生效。
二、A组件或者B组件触发数据更新，C组件数据更新了，但是C组件仍显示上一次数据。

方案一：v-if（可以重置生命周期）

当路由变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题
<template>
  <form-component :initModelForData="initModelForData" :subTitle="subTitle" :columnList="columnList" v-if="reFresh"></form-component>
</template>

<script>
  export default{
    data(){
      return {
        reFresh:true,
      }
    },
    watch:{
      $route(to, form) {
        this.reFresh= false
        this.$nextTick(()=>{
            this.reFresh = true
        })
      }
    }
}
</script>

这种方式虽然可以实现，但太不优雅

方案二 :key=’’（此处可触发watch和update）

通过vue key 实现，原理请查看官方文档。所以当key 值变更时，会自动的重新渲染。

<template>
  <form-component :initModelForData="initModelForData" :subTitle="subTitle" :columnList="columnList" :key="key"></form-component>
</template>

<script>
  export default{
    data(){
      return {
        key: 1
      }
    },
    watch:{
      $route(to, form) {
        ++this.key
      }
    }
}
</script>