vue组件中如何重新渲染

这篇文章主要讲解了“vue组件中如何重新渲染”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue组件中如何重新渲染”吧！

改变key

这个是最推荐的。

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

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

组件会重新渲染，相应的生命周期函数，计算属性，watch等都会执行。

<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是双向绑定的，数据变化，视图也会实时刷新，什么情况下会用到这个方法呢？

比如vue只针对数组的这些方法会刷新视图：

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

所以比如你对数组的某个值重新赋值的时候，vue是不会刷新视图的。 那么你就可以用这个方法来强制刷新视图。

export default {
  data () {
    return {
      arr: [1, 2, 3]
    }
  },
  methods: {
    editArr () {
      this.arr[0] = 0 // 视图不会刷新
    },
    forceUpdate () {
      this.$forceUpdate() // 调用这个方法会刷新视图
    }
  }
}

vue实例执行这个方法的时候，仅仅只是刷新视图，实例对应的生命周期函数，计算属性，watch等不会重新执行。

感谢各位的阅读，以上就是“vue组件中如何重新渲染”的内容了，经过本文的学习后，相信大家对vue组件中如何重新渲染这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！