淺談vue元件中怎麼重新渲染？ 3種方式分享

vue元件中怎麼重新渲染？以下這篇文章就來給大家總結分享vue元件的重新渲染的幾種方式，希望對大家有幫助！

最近遇到一個需求，就是要把目前的元件重新渲染。這個好辦，通知父元件去重新渲染就好。

下面我把我知道的vue元件的重新渲染的幾種方式總結一下。 【相關推薦：《vue.js教學》】

改變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 &#39;@/components/aComp&#39;
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元件中怎麼重新渲染？ 3種方式分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！