vue 组件异步渲染问题

Question

1.要实现的功能
通过ajax请求一段 html 代码 把代码中的 img 标签 替换为 himg
himg 为自定义的vue组件 用来给img添加图片点击放大 并做图片加载失败的处理

2.想法 定义了个异步组件 为 hhtml

components: {
            'hhtml': (resolve)=>{
                that.getdata().then((a)=>{
                
                    resolve ({
                        components: {
                            'himg': hImg
                        },
                        template: '<div>'+a+'</div>'
                    })
                })

            }
        }
       

这里的that为这个组件的父组件

父组件 里有 method getdata 函数为Promise 返回 replace img 标签后的 himg 标签的html

执行发现成功 hhtml成功获取到了数据

3.发现问题
本以为到这里解决了问题 却发现即使 $router.push 和$router.go(-1) 后 组件没有发生变化 没有重新执行 that.getdata() 来获取数据 组件内的值也没发生变化

问 ： 为什么会产生这种原因？ 如何解决？

11月22日
产生原因已经了解了 Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

Answer 1

已经解决

import hImg from '../components/himg'
import Vue from 'vue';
export default {
    data() {
        return {
            dynamicsComponent:{}
        }
    },created:function(){
                var res=  Vue.compile('<div> <h1>'+Math.random()+'</h1> <himg src="https://avatar-static.segmentfault.com/207/052/207052733-5a5482896925c_big64"></himg> </div>')
                this.dynamicsComponent=    {
                    components: {
                        'himg': hImg
                    },render: res.render,
                    staticRenderFns: res.staticRenderFns
                }
            }
}