欢迎光临
我的个人博客网站

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> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue中组件重新渲染
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏