Vue中组件重新渲染

前言

据网上流传，有关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>