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

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

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

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

改變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()

• #push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

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

vue實例執行這個方法的時候，只是刷新視圖，實例對應的生命週期函數，計算屬性，watch等不會重新執行。

程式設計入門！ ！

以上是淺談vue元件中怎麼重新渲染？ 3種方式分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！