阅读模式:

Vue之组件重新渲染

阅读量:15  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:前言据网上流传,有关Vue组件重新渲染的方案往往存在如下四种。1、借助route机制,刷新整个页面2、使用v-if,将组件销毁、重新加载3、使用内置的forceUpdate方法4、使用key-changing优化组件前两种没什么好说的,并且......

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>
分享到:
相关阅读:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: