Vue中组件重新渲染

前言据网上流传，有关Vue组件重新渲染的方案往往存在如下四种。1、借助route机制，刷新整个页面2、使用v-if，将组件销毁、重新加载3、使用内置的forceUpdate方法4、使用key-changing优化组件前两种没什么好说的...

前言

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

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

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

3、使用内置的forceUpdate方法

4、使用key-changing优化组件

前两种没什么好说的，并且考虑到效率问题，本次主要是记录forceUpdate和key-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>