【Vue】解决 Vue 视图不刷新和组件循环引用不加载问题

​

1.视图不刷新：强制更新视图

场景：

        1.当你的一个input绑定的值，是data中开始不存在的，后来新添加的情况，可能你就需要用到这个强制更新了；

        2.也可能是项目遗留问题，你来进行修复，不想大动干戈改造，那么就强更吧。

this.$forceUpdate()
复制代码

引用官网的一句话：

​

需要用到他的时候，大多数可能是某个地方写错了。

2.递归组件&循环引用组件不加载

场景：

在一个列表页面 A 的新增弹框 C 中，需要引用到该列表 A 进行数据关联（如引用某个字段）。

这时，在 C 中对 A 进行了循环引用，会出现首次刷新无法正常加载（如command + R 或 control + F5 后），可能在你手动改变了页面内容，vue 刷新后加载成功。

这就涉及到了循环引用，需要在声明组件的地方，使用 webpack 的异步 import 操作：

components: {
  TestComponent: () => import('./test-components.vue')
}
复制代码

这样，就会在使用到该组件的时候，才对其进行加载。

​