強制更新和創建低開銷的靜態組件

點擊打開視頻講解更加詳細

強制更新

如果你發現你自己需要在 Vue 中做一次強制更新，99.9% 的情況，是你在某個地方做錯了事。

你可能還沒有留意到數組或對象的變更檢測註意事項，或者你可能依賴了一個未被 Vue 的響應式系統追蹤的狀態。

然而，如果你已經做到了上述的事項仍然發現在極少數的情況下需要手動強制更新，那麼你可以通過 $forceUpdate 來做這件事。

完整案例：

<template>
  <div id="app">
    name:<div>{{ obj.name }}</div>
    age:<div>{{ obj.age }}</div>

    <div v-for="(item,index) in list" :key="index">{{ item.name }} -- {{ item.age }}</div>

    <button @click="change">改變</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      // 對象
      obj :{
        name:'末晨曦吖'
      },
      // 數組
      list:[
        { name:'一笑而過' }
      ]
    } 
  },
  mounted() {
    
  },
  components:{
    
  },
  methods:{
    change(){
      // 對象
      // this.obj.age = 18
      // this.$forceUpdate()     // 第一種解決方式： this.$forceUpdate(); 強制刷新  同等效果的：window.location.reload()  不推薦
      // this.$set(this.obj,'age',18)   // 第二種解決方式 推薦使用

      // 數組
      // this.list[0].age = 18
      // this.$forceUpdate()
      this.$set(this.list[0],'age',18)
    }
  }
}
</script>

<style scoped>
 
</style>

通過 v-once 創建低開銷的靜態組件

渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的時候你可能有一個組件，這個組件包含了大量靜態內容。在這種情況下，你可以在根元素上添加 v-once attribute 以確保這些內容只計算一次然後緩存起來，就像這樣：

Vue.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})

再說一次，試著不要過度使用這個模式。當你需要渲染大量靜態內容時，極少數的情況下它會給你帶來便利，除非你非常留意渲染變慢了，不然它完全是沒有必要的——再加上它在後期會帶來很多困惑。例如，設想另一個開發者並不熟悉 v-once 或漏看了它在模板中，他們可能會花很多個小時去找出模板為什麼無法正確更新。

若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！！！