vue组件中重新渲染的3种方式小结

本文主要介绍了vue组件中重新渲染的3种方式小结,主要包括改变key,v-if,vm.$forceUpdate()这三种,具有一定的参考价值,感兴趣的可以了解一下

改变key

• 这个是最推荐的。因为vue是通过虚拟Dom算法来判断元素的变化，是否变化的核心是通过判断新旧元素的key值是否变化。如果你的key是变化的，则重新渲染该元素，如果key没变，则不会重新渲染。

• 所以如果你想让你的组件重新渲染，你给组件加上key属性，然后在需要重新渲染的时候，改变key的值就行。

• <template>
    <div class="home">
      <el-button @click="freshKey">test</el-button>
      <aComp :key="key"></aComp>
    </div>
  </template>
  <script>
  import aComp from '@/components/aComp'
  export default {
    components: {
      aComp
    },
    data () {
      return {
        key: 0
      }
    },
    methods: {
      freshKey () {
        this.key++
      }
    }
  }
  </script>

v-if

• 我们用的指令中，v-if也是比较多的。

• 当你设置为false的时候，当前条件块里包含的元素会被销毁，如果包含的是组件，则组件对应的生命周期函数（beforeDestroy，destroyed等）会执行。

• 当你设置为true的时候，当前条件块里的元素会被重建，如果包含的是组件，则组件对应的生命周期函数（created，mounted等），计算属性，watch等会执行，相当于重新渲染。

vm.$forceUpdate()

• 这个方法用的不多，是强制更新视图。

 到此这篇关于vue组件中重新渲染的3种方式小结的文章就介绍到这了,更多相关vue 重新渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

• vue+echarts动态更新数据及数据变化重新渲染方式
• 解决Vue3 echarts v-show无法重新渲染的问题
• 解决vue修改数据页面不重新渲染问题
• Vue中关于重新渲染组件的方法及总结
• vue异步请求数据重新渲染方式
• Vue组件重新渲染(组件重载)的3种实现方式