Vue之组件重新渲染

前言

据网上流传,有关Vue组件重新渲染的方案往往存在如下四种。

1、借助route机制,刷新整个页面

2、使用v-if,将组件销毁、重新加载

3、使用内置的forceUpdate方法

4、使用key-changing优化组件

前两种没什么好说的,并且考虑到效率问题,本次主要是记录forceUpdatekey-changing两种组件渲染方法(不支持uni-app编写小程序)

force update

组件内置$forceUpdate方法,使用前需要在配置中启用。

import Vue from 'vue'
Vue.forceUpdate()

export default {
  methods: {
    handleUpdateClick() {
      // built-in
      this.$forceUpdate()
    }
  }
}

key-changing

原理很简单,vue使用key标记组件身份,当key改变时就是释放原始组件,重新加载新的组件。

<template>
  <div>
    <span :key="key"></span>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        key: 0
      }
    },
    methods: {
      handleUpdateClick() {
        this.key += 1 
      }
    }
  }
</script>
注:本文可分享可转发,转发请注明出自bug源
posted @ 2021-03-31 13:48  bugSource  阅读(99)  评论(0编辑  收藏  举报