使用vue组件时数据因为某些事件导致页面数据不实时更新

项目场景：

页面输入数据时,数据渲染不到自己的输入框内,必须点击其他操作才可以显示出来

---

问题描述

输入数据无法实时更新显示

---

解决方案：

方法一:this.$forceUpdate();

添加this.$forceUpdate();进行强制渲染，效果可以实现。(用来全局强制刷新，性能消耗高)

从搜索资料得出结果：因为数据层次（for循环太多）太多，render函数没有自动更新，需手动强制刷新。

调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。

我是在使用多层for循环嵌套时出现的页面没有及时刷新改变后的值的问题( 使用this.$forceUpdate() )

使用方法:

input( ) {
                // vue2的引擎这种数组下标去改变数据的时候视图不会刷新
                this.arr[0]= 10000
                console.log(this.arr)
                // vue2知道自己的bug 全局提供给所有实例了 一个方法 
                // $forceUpdate()  可以让算法重新计算 刷新更新页面 
                this.$forceUpdate()
}

在方法执行完毕后，添加this.$forceUpdate()

方法二：v-if/v-show
对于v-if 的使用，我们常用在子组件显示上。我们查看文档时，会发现它常常被用于与v-show 的比较。对于经常性加载的组件，显示方式应该使用v-show 来实现组件的显示。为什么呢？因为当 v-if = ‘false’ 时，子组件是会被卸载的。当它重新 v-if = ‘true’ 时，它需要重新跑一遍生命周期的进程。而 v-show 仅是让子组件隐藏了而已。所以，使用v-show 并不用重新跑一遍生命周期。这样对系统资源的花销就比较小了。故而，对于经常性加载的组件建议使用 v-show 来实现显示/隐藏，节省系统花销。
基于上面理论，我们知道了v-if 会让组件重新渲染。这不就是组件刷新吗？所以，我们就可以借组v-if 实现组件的强制刷新。

实现原理：通过v-if 来控制组件的显示/隐藏。

1、我们可以在父组件设置一个变量用于存放子组件显示/隐藏的状态(state)。
 

<template>
  <div>
   <child v-if='updata'></child>
  </div>
</template>

<script>
import child from './child'
export default {
  name: "parent",
  data() {
    return {
      updata: false
    };
  },
  components:{
    child:child
  }
};
</script>

2、然后我们通过设置方法来控制显示和隐藏。

 methods: {
    isShow: function() {
      this.updata= true;
    },
    isHidde: function() {
      this.updata= false;
    }

当触发 isShow 方法时，组件就加载渲染。当触发 isHidden 方法时，组件就卸载隐藏。当下次再触发 isShow 方法时，组件就重新渲染加载了。这样就实现了组件的刷新。

如果想在子组件某个操作完成后就卸载该组件，那么可以在子组件中调用isHidden 实现。比如说子组件是confirm 框， 当用户点击“确定/取消”后想卸载该组件，那就在确定/取消事件里调用添加代码：

this.$parent.isHidde();

方法三：:key=“value”

该方法和方法一非常相似，都是通过改变一个变量来实现组件的强制刷新。但要注意的是，只要当key的值改变，组件就会自动刷新，所以key的值可以是任何类型。而v-if 的值严格来说只能是true/false。