项目场景:

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


问题描述

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


解决方案:

方法一: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

Logo

前往低代码交流专区

更多推荐