Vue.js强制重新渲染组件的正确方法

[广告:最高 ¥2000 红包]阿里云服务器、主机等产品通用,可叠加官网常规优惠使用 | 限时领取

在开发过程中,有时候会遇到这么一种情况,通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件。一般有这4种方法:

  • 重新渲染整个页面(别笑,虽然不可取的,但确实是一种方法)
  • v-if条件按条件加载组件(这个方式会不断的删除构建dom,开销较大)
  • vue.$forceUpdate 方法(可选)
  • 最好的方法:在组件上添加:key值 

v-if 方法

为组件添加v-if指令

<template>
  <my-component v-if="renderComponent" />
</template>

通过$nextTick,在下一个事件循环“tick”中更新v-if值,使用my-component组件重新构建。

<script>
  export default {
    data() {
      return {
        renderComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // Remove my-component from the DOM
        this.renderComponent = false;

        this.$nextTick(() => {
          // Add the component back in
          this.renderComponent = true;
        });
      }
    }
  };
</script>

编定:key值

这是强制Vue重新渲染组件的最佳方法。

在Vue.js中,key是6个特殊属性key, ref, is, slot, slot-scope, scope其中之一。

  • key的值可以是number,也可以是string。
  • key主要作用于Vue的virtual DOM算法,在diff new nodes list和old nodes list时,作为识别VNode的一个线索。
  • 如果不用key,Vue会用一种算法:最小化element的移动,并且会尝试尽最大程度在同适当的地方对相同类型的element,做patch或者reuse。
  • 如果使用了key,Vue会根据keys的顺序记录element,曾经拥有了key的element如果不再出现的话,会被直接remove或者destoryed。
  • 拥有同一个parent的children必须有unique keys。重复的key的导致render error。

vue.js的虚拟DOM算法,在更新vNode时,需要从旧vNode列表中查找与新vNode节点相同的vNode进行更新,如果这个过程设置了属性key,过程就会快很多。

代码如下:

<template>
  <my-component :key="componentKey" />
</template>

脚本中更改componentKey的值,就可以重新渲染my-component。

export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;
    }
  }
}

参考资料

码中人 微信公众号

关注微信公众号

码中人 微信公众号