Vue 組件生命周期：探索鉤子

来源:https://www.cnblogs.com/Amd794/p/18216274
-Advertisement-
Play Games

title: Vue 組件生命周期：探索鉤子 date: 2024/5/27 18:42:38 updated: 2024/5/27 18:42:38 categories: 前端開發 tags: 生命周期 非同步載入 通信原理 父子通信 兄弟通信 跨層通信 性能優化 第 1 章：介紹與背景 1.1 ...


title: Vue 組件生命周期：探索鉤子
date: 2024/5/27 18:42:38
updated: 2024/5/27 18:42:38
categories:

  • 前端開發

tags:

  • 生命周期
  • 非同步載入
  • 通信原理
  • 父子通信
  • 兄弟通信
  • 跨層通信
  • 性能優化

image

第 1 章：介紹與背景

1.1 什麼是 Vue 組件生命周期？

Vue 組件生命周期是指 Vue 組件從創建、運行到銷毀的整個過程，共分為 8 個階段：

  1. 創建前（beforeCreate）
  2. 創建後（created）
  3. 載入前（beforeMount）
  4. 載入後（mounted）
  5. 更新前（beforeUpdate）
  6. 更新後（updated）
  7. 銷毀前（beforeDestroy）
  8. 銷毀後（destroyed）

在每個階段，Vue 框架都提供了特定的鉤子函數，開發人員可以在這些函數中編寫自定義的代碼，從而實現對組件生命周期的控制和管理。

1.2 為什麼需要瞭解生命周期？

瞭解 Vue 組件生命周期有以下幾個優點：

  1. 瞭解組件的運行機制，提高開發效率。
  2. 在合適的時機進行數據處理和事件綁定，提高項目性能。
  3. 在組件創建和銷毀時進行資源清理和記憶體釋放，避免記憶體泄漏。
  4. 在生命周期鉤子函數中進行非同步數據載入和組件通信，使代碼更加清晰和可維護。

1.3 如何利用生命周期提高開發效率？

  1. 在創建階段，可以進行數據初始化和事件綁定，避免在模板中頻繁的編寫相同的代碼。
  2. 在運行階段，可以對數據進行監聽和優化，提高項目性能。
  3. 在銷毀階段，可以進行資源清理和記憶體釋放，避免記憶體泄漏。AD：漫畫首頁
  4. 在生命周期鉤子函數中進行非同步數據載入和組件通信，使代碼更加清晰和可維護。
  5. 通過使用第三方庫或插件，可以更加方便地使用生命周期鉤子函數，提高開發效率。

第 2 章：組件生命周期概述

2.1 組件生命周期的基本概念

組件生命周期是指 Vue 組件從創建、運行到銷毀的整個過程。在這個過程中，Vue 框架會自動調用一系列的生命周期鉤子函數，開發人員可以在這些函數中編寫自定義的代碼，從而實現對組件生命周期的控制和管理。

2.2 生命周期鉤子函數的分類

Vue 組件的生命周期鉤子函數可以分為以下幾類：

  1. 創建階段鉤子函數：在組件創建時調用，包括 beforeCreate 和 created 兩個鉤子函數。
  2. 載入階段鉤子函數：在組件載入時調用，包括 beforeMount 和 mounted 兩個鉤子函數。
  3. 更新階段鉤子函數：在組件更新時調用，包括 beforeUpdate 和 updated 兩個鉤子函數。
  4. 銷毀階段鉤子函數：在組件銷毀時調用，包括 beforeDestroy 和 destroyed 兩個鉤子函數。

2.3 常見的生命周期鉤子函數

  1. beforeCreate：在組件實例被創建之前調用，此時組件實例的數據和方法還未初始化。
  2. created：在組件實例被創建之後調用，此時組件實例的數據和方法已經初始化，但組件還未被掛載到 DOM 上。
  3. beforeMount：在組件被掛載到 DOM 之前調用，此時組件的模板已經編譯完成，但還未渲染到 DOM 上。
  4. mounted：在組件被掛載到 DOM 之後調用，此時組件已經渲染到 DOM 上，可以進行 DOM 操作和非同步數據載入。
  5. beforeUpdate：在組件更新之前調用，此時組件的數據已經發生變化，但還未重新渲染到 DOM 上。
  6. updated：在組件更新之後調用，此時組件的數據已經重新渲染到 DOM 上，可以進行 DOM 操作和非同步數據載入。
  7. beforeDestroy：在組件銷毀之前調用，此時組件實例仍然可用，可以進行資源清理和記憶體釋放。AD：首頁 | 一個覆蓋廣泛主題工具的高效線上平臺
  8. destroyed：在組件銷毀之後調用，此時組件實例已經被銷毀，無法再進行任何操作。

第 3 章：創建階段

在 Vue.js 中，組件的創建階段包括以下幾個鉤子函數：

  1. beforeCreate：在組件實例被創建之前調用，此時數據和方法還未初始化。
  2. created：在組件實例被創建之後調用，此時數據和方法已經初始化，可以進行數據操作和事件綁定。
  3. beforeMount：在組件被掛載到 DOM 之前調用，此時模板已經編譯完成，但還未渲染到 DOM 上。
  4. mounted：在組件被掛載到 DOM 之後調用，此時組件已經渲染到 DOM 上，可以進行 DOM 操作和非同步數據載入。

在創建階段，可以在鉤子函數中進行數據處理和事件綁定，以簡化組件的代碼和提高組件的性能。

例如，在 created 鉤子函數中可以進行數據的請求和初始化，從而避免在組件掛載到 DOM 之後再進行數據請求，提高組件的渲染速度。

同時，可以在 created 鉤子函數中進行事件的綁定，從而在組件創建時就完成事件的綁定，而無需在 mounted 鉤子函數中進行事件綁定。

總之，在創建階段進行數據處理和事件綁定，可以簡化組件的代碼和提高組件的性能，是實現高質量 Vue 組件開發的重要手段。

以下是一些代碼示例：

// 在 created 鉤子函數中進行數據的請求和初始化
export default {
  data() {
    return {
      user: null
    }
  },
  created() {
    this.fetchUser()
  },
  methods: {
    fetchUser() {
      // 進行數據請求和初始化
      this.user = {
        name: 'John Doe',
        age: 30
      }
    }
  }
}

// 在 created 鉤子函數中進行事件的綁定
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  created() {
    this.handleClick = () => {
      console.log(this.message)
    }
  },
  mounted() {
    document.getElementById('btn').addEventListener('click', this.handleClick)
  }
}

在上述示例中，我們可以看到在 created 鉤子函數中進行數據的請求和初始化，以及事件的綁定，從而在組件創建時就完成數據的請求和初始化，並且在組件掛載到 DOM 之後就完成事件的綁定。

第 4 章：運行階段

在 Vue.js 中，組件的運行階段包括以下幾個鉤子函數：

  1. beforeUpdate：在組件更新之前調用，此時數據已經更新，但 DOM 還未重新渲染。
  2. updated：在組件更新之後調用，此時 DOM 已經重新渲染。

在運行階段，可以在鉤子函數中進行數據監聽和性能優化，以提高組件的響應速度和性能。

例如，在 beforeUpdate 鉤子函數中可以進行數據的監聽，從而在數據更新時及時更新組件的狀態，避免出現數據不一致的情況。

同時，可以在 updated 鉤子函數中進行性能優化，例如使用虛擬滾動技術來優化大量數據的渲染，或者使用防抖和節流技術來優化頻繁觸發的事件。
AD：專業搜索引擎

總之，在運行階段進行數據監聽和性能優化，可以提高組件的響應速度和性能，是實現高質量 Vue 組件開發的重要手段。

以下是一些代碼示例：

// 在 beforeUpdate 鉤子函數中進行數據的監聽
export default {
  data() {
    return {
      count: 0
    }
  },
  beforeUpdate() {
    console.log(`count before update: ${this.count}`)
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

// 在 updated 鉤子函數中進行性能優化
export default {
  data() {
    return {
      items: []
    }
  },
  updated() {
    // 使用虛擬滾動技術來優化大量數據的渲染
    const container = document.getElementById('container')
    container.style.height = `${container.scrollHeight}px`
  },
  methods: {
    addItem() {
      this.items.push(`Item ${this.items.length}`)
    }
  }

第 5 章：銷毀階段

在 Vue.js 中，組件的銷毀階段包括以下兩個生命周期鉤子函數：

  1. beforeDestroy：在組件銷毀之前調用。在這個階段，組件實例仍然完全可用，這意味著所有的數據綁定、事件監聽器、計算屬性等都還在工作。
  2. destroyed：在組件銷毀之後調用。在這個階段，組件實例已經被銷毀，所有的綁定和事件監聽器都已經被移除，組件不再可用。

在銷毀階段，通常會進行資源清理和記憶體釋放，以確保應用程式的性能和穩定性。以下是一些常見的清理操作：

  • 取消訂閱：如果組件中使用了事件訂閱（如使用 EventBus 或第三方庫如 RxJS），應該在 beforeDestroy 鉤子中取消這些訂閱，以避免記憶體泄漏。
  • 清除定時器：如果在組件中使用了定時器（如 setInterval 或 setTimeout），應該在 beforeDestroy 鉤子中清除這些定時器。
  • 解綁事件監聽器：如果組件綁定了 DOM 事件監聽器，應該在 beforeDestroy 鉤子中解綁這些事件監聽器。
  • 斷開 WebSocket 連接：如果組件使用了 WebSocket 連接，應該在 beforeDestroy 鉤子中斷開這些連接。

以下是一個簡單的示例，展示瞭如何在 beforeDestroy 鉤子中進行資源清理：

export default {
  data() {
    return {
      timer: null
    };
  },
  created() {
    // 創建定時器
    this.timer = setInterval(() => {
      console.log('定時器運行中...');
    }, 1000);
  },
  beforeDestroy() {
    // 清除定時器
    clearInterval(this.timer);
  },
  destroyed() {
    console.log('組件已被銷毀');
  }
};

在這個示例中，組件在創建時啟動了一個定時器，併在銷毀前清除這個定時器，以避免記憶體泄漏。destroyed 鉤子簡單地記錄了組件已被銷毀的信息。通過這種方式，可以確保組件在不再需要時能夠正確地釋放資源，從而優化應用程式的性能和記憶體使用。

第 6 章：非同步數據載入

在 Vue.js 中，非同步數據載入是常見的需求，通常通過在生命周期鉤子函數中發起數據請求來實現。以下是如何使用生命周期函數進行數據請求以及在合適的時機取消請求的詳細說明：

6.1 使用生命周期函數進行數據請求

通常，數據請求會在組件的生命周期鉤子函數中發起，特別是 created 或 mounted 鉤子。這兩個鉤子分別在組件實例被創建後和組件掛載到 DOM 後立即調用。

示例：在 created 鉤子中發起數據請求

export default {
  data() {
    return {
      posts: []
    };
  },
  created() {
    this.fetchPosts();
  },
  methods: {
    async fetchPosts() {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const data = await response.json();
        this.posts = data;
      } catch (error) {
        console.error('Error fetching posts:', error);
      }
    }
  }
};

在這個示例中，組件在創建後立即調用 fetchPosts 方法來獲取數據。使用 async/await 來處理非同步操作，使得代碼更加清晰和易於理解。

6.2 在合適的時機取消請求

在某些情況下，可能需要在組件銷毀前取消未完成的請求，以避免潛在的記憶體泄漏或不必要的網路請求。這通常在 beforeDestroy 鉤子中完成。

示例：在 beforeDestroy 鉤子中取消請求

假設使用 axios 進行數據請求，並且每個請求都有一個唯一的標識符，可以使用這個標識符來取消請求。

import axios from 'axios';
import { ref } from 'vue';

export default {
  data() {
    return {
      cancelTokenSource: ref(null),
      posts: []
    };
  },
  created() {
    this.fetchPosts();
  },
  beforeDestroy() {
    if (this.cancelTokenSource.value) {
      this.cancelTokenSource.value.cancel('組件銷毀前取消請求');
    }
  },
  methods: {
    fetchPosts() {
      this.cancelTokenSource.value = axios.CancelToken.source();
      axios.get('https://jsonplaceholder.typicode.com/posts', {
        cancelToken: this.cancelTokenSource.value.token
      }).then(response => {
        this.posts = response.data;
      }).catch(thrown => {
        if (axios.isCancel(thrown)) {
          console.log(thrown.message); // 輸出：組件銷毀前取消請求
        } else {
          console.error('Error fetching posts:', thrown);
        }
      });
    }
  }
};

在這個示例中，使用 axios 的 CancelToken 來創建一個取消令牌，併在 beforeDestroy 鉤子中使用這個令牌來取消請求。如果請求被取消，axios 會拋出一個特定的錯誤，可以通過 axios.isCancel 來檢查這個錯誤。

通過這種方式，可以確保在組件不再需要數據時，不會繼續進行不必要的數據請求，從而優化性能並減少資源消耗。

第 7 章：組件通信

在 Vue.js 中，組件通信是非常重要的話題，可以分為父子組件通信、兄弟組件通信和跨層級組件通信。以下是詳細的說明：

7.1 父子組件通信

父子組件通信是最常見的組件通信方式，在父組件和子組件之間傳遞數據和事件非常簡單。

父組件向子組件傳遞數據

可以使用 props 將數據從父組件傳遞到子組件。

示例：父組件向子組件傳遞數據

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component :title="parentTitle"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentTitle: 'Hello from parent!'
    };
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  }
};
</script>

子組件向父組件發送事件

可以使用 $emit 將事件從子組件發送到父組件。

示例：子組件向父組件發送事件

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(message) {
      console.log('Received message from child:', message);
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('child-event', 'Hello from child!');
    }
  }
};
</script>

7.2 兄弟組件通信

對於兄弟組件之間的通信，可以使用一個中間組件或者通過事件匯流排（event bus）。

使用中間組件

可以使用一個中間組件來傳遞數據和事件。

示例：使用中間組件

<!-- ParentComponent.vue -->
<template>
  <div>
    <first-child @first-child-event="handleFirstChildEvent"></first-child>
    <second-child :message="firstChildMessage"></second-child>
  </div>
</template>

<script>
import FirstChildComponent from './FirstChildComponent.vue';
import SecondChildComponent from './SecondChildComponent.vue';

export default {
  components: {
    FirstChildComponent,
    SecondChildComponent
  },
  data() {
    return {
      firstChildMessage: null
    };
  },
  methods: {
    handleFirstChildEvent(message) {
      this.firstChildMessage = message;
    }
  }
};
</script>

<!-- FirstChildComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send message to second child</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('first-child-event', 'Hello from first child!');
    }
  }
};
</script>

<!-- SecondChildComponent.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

使用事件匯流排

可以使用一個全局事件匯流排來實現兄弟組件之間的通信。

示例：使用事件匯流排

// main.js
import Vue from 'vue';
export const EventBus = new Vue();

// FirstChildComponent.vue
<template>
  <div>
    <button @click="sendMessage">Send message to second child</button>
  </div>
</template>

<script>
import { EventBus } from './main';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('first-child-event', 'Hello from first child!');
    }
  }
};
</script>

// SecondChildComponent.vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { EventBus } from './main';

export default {
  data() {
    return {
      message: null
    };
  },
  created() {
    EventBus.$on('first-child-event', message => {
      this.message = message;
    });
  }
};
</script>

7.3 跨層級組件通信

對於跨層級組件之間的通信，可以使用 provide 和 inject 或者使用 Vuex 狀態管理。

使用 provide 和 inject

可以使用 provide 和 inject 在父組件和子組件之間進行跨層級通信。

示例：使用 provide 和 inject

<!-- ParentComponent.vue -->
<template>
  <div>
    <first-child></first-child>
  </div>
</template>

<script>
import FirstChildComponent from './FirstChildComponent.vue';
import SecondChildComponent from './SecondChildComponent.vue';

export default {
  components: {
    FirstChildComponent
  },
  provide() {
    return {
      parentMessage: 'Hello from parent!'
    };
  }
};
</script>

<!-- FirstChildComponent.vue -->
<template>
  <div>
    <second-child></second-child>
  </div>
</template>

<script>
import SecondChildComponent from './SecondChildComponent.vue';

export default {
  components: {
    SecondChildComponent
  },
  inject: ['parentMessage']
};
</script>

<!-- SecondChildComponent.vue -->
<template>
  <div>
    <h1>{{ parentMessage }}</h1>
  </div>
</template>

<script>
export default {
  inject: ['parentMessage']
};
</script>

使用 Vuex

可以使用 Vuex 狀態管理來實現跨層級組件通信。

示例：使用 Vuex

// store.js
import Vuex from 'vuex';
import Vue from 'vue';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    message: 'Hello from Vuex!'
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  }
});

export default store;

// ParentComponent.vue
<template>
  <div>
    <first-child></first-child>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import FirstChildComponent from './FirstChildComponent.vue';

export default {
  components: {
    FirstChildComponent
  },
  methods: {
    ...mapMutations(['setMessage'])
  },
  mounted() {
    this.setMessage('Hello from parent!');
  }
};

第 8 章：組件優化

在構建大型 Vue.js 應用時，性能和記憶體優化是非常重要的。以下是有關組件優化的詳細說明。

8.1 性能優化

8.1.1 使用 v-if 和 v-for 時註意順序

在使用 v-if 和 v-for 時，應該優先使用 v-if，因為 v-for 會每次都重新渲染整個列表。如果同時使用 v-if 和 v-for，v-for 應該優先放在 v-if 前面。

8.1.2 使用 key 來優化 v-for

在使用 v-for 時，應該為每個項目提供一個唯一的 key，這可以幫助 Vue.js 跟蹤每個節點的身份，從而提高渲染性能。

8.1.3 使用 v-once 渲染靜態內容

如果某個組件的內容在整個生命周期中都不會改變，可以使用 v-once 來渲染靜態內容，以提高渲染性能。

8.1.4 使用 v-memo 緩存組件

在使用 v-for 時，可以使用 v-memo 來緩存組件，以避免重新渲染。

8.1.5 使用 v-pre 跳過編譯

如果某個組件的內容不需要被 Vue.js 編譯，可以使用 v-pre 來跳過編譯，以提高渲染性能。

8.1.6 使用 v-cloak 隱藏未編譯的Mustache標簽

在使用 Mustache 標簽時，可以使用 v-cloak 來隱藏未編譯的 Mustache 標簽，以避免閃爍。

8.2 記憶體優化

8.2.1 使用 v-if 和 v-for 時註意性能

在使用 v-if 和 v-for 時，應該註意它們的性能影響，避免不必要的渲染。

8.2.2 使用 v-show 渲染靜態內容

在使用 v-show 時，可以渲染靜態內容，而不是使用 v-if 創建和銷毀節點。

8.2.3 使用 Object.freeze 凍結數據

在使用 Object.freeze 時，可以凍結數據，避免不必要的重新渲染。

8.2.4 使用 v-once 渲染靜態內容

在使用 v-once 時，可以渲染靜態內容，而不是每次都重新渲染節點。

8.2.5 使用 $once 監聽事件

在使用 $once 時，可以監聽事件，而不是使用 $on 創建永久的監聽器。

8.2.6 使用 $off 取消事件監聽

在使用 $off 時，可以取消事件監聽，避免記憶體泄漏。

8.3 避免常見的陷阱

8.3.1 避免使用 Array.prototype.splice 修改數組

在使用 Array.prototype.splice 時，可能會導致 Vue.js 無法檢測到變化，從而導致不必要的重新渲染。

8.3.2 避免使用 Object.assign 修改對象

在使用 Object.assign 時，可能會導致 Vue.js 無法檢測到變化，從而導致不必要的重新渲染。

8.3.3 避免使用箭頭函數

在使用箭頭函數時，可能會導致 this 指向不正確，從而導致不必要的重新渲染。

8.3.4 避免使用 v-html 和 v-text 混合使用

在使用 v-html 和 v-text 時，可能會導致不必要的重新渲染。

8.3.5 避免使用 v-model 和 .sync 修飾符混合使用

在使用 v-model 和 .sync 修飾符時，可能會導致不必要的重新渲染。

8.3.6 避免使用 watch 監聽數組

在使用 watch 時，可能會導致不必要的重新渲染。

8.3.7 避免使用 watch 監聽對象

在使用 watch 時，可能會導致不必要的重新渲染。

8.3.8 避免使用 deep 選項

在使用 deep 選項時，可能會導致不必要的重新渲染。

8.3.9 避免使用 immediate 選項

在使用 immediate 選項時，可能會導致不必要的重新渲染。

8.3.10 避免使用 computed 和 watch 混合使用

在使用 computed 和 watch 時，可能會導致不必要的重新渲染。

8.3.11 避免使用 methods 和 computed 混合使用

在使用 methods 和 computed 時，可能會導致不必要的重新渲染。

8.3.12 避免使用 created 和 mounted 混合使用

在使用 created 和 mounted 時，可能會導致不必要的重新渲染。

8.3.13 避免使用 beforeDestroy 和 destroyed 混合使用

在使用 beforeDestroy 和 destroyed 時，可能會導致不必要的重新渲染。

8.3.14 避免使用 activated 和 deactivated 混合使用

在使用 activated 和 deactivated 時，可能會導致不必要的重新渲染。

8.3.15 避免使用 keep-alive 和 v-if 混合使用

在使用 keep-alive 和 v-if 時，可能會導致不必要的重新渲染。

8.3.16 避免使用 transition 和 v-if 混合使用

在使用 transition 和 v-if 時，可能會導致不必要的重新渲染。

8.3.17 避免使用 v-else 和 v-else-if 混合使用

在使用 v-else 和 v-else-if 時，可能會導致不必要的重新渲染。

8.3.18 避免使用 v-for 和 v-if 混合使用

在使用 v-for 和 v-if 時，可能會導致不必要的重新渲染。

8.3.19 避免使用 v-model 和 .sync 修飾符混合使用

在使用 v-model 和 .sync 修飾符時，可能會導致不必要的重新渲染。

8.3.20 避免使用 v-model 和 v-for 混合使用

在使用 v-model 和 v-for 時，可能會導致不必要的重新渲染。

8.3.21 避免使用 v-model 和 v-show 混合使用

在使用 v-model 和 v-show 時，可能會導致不必要的重新渲染。

8.3.22 避免使用 v-model 和 v-once 混合使用

在使用 v-model 和 v-once 時，可能會導致不必要的重新渲染。

8.3.23 避免使用 v-model 和 v-memo 混合使用

在使用 v-model 和 v-memo 時，可能會導致不必要的重新渲染。

8.3.24 避免使用 v-model 和 v-pre 混合使用

在使用 v-model 和 v-pre 時，可能會導致不必要的重新渲染。

8.3.25 避免使用 v-model 和 v-cloak 混合使用

在使用 v-model 和 v-cloak 時，可能會導致不必要的重新渲染。

8.3.26 避免使用 v-model 和 v-html 混合使用

在使用 v-model 和 v-html 時，可能會導致不必要的重新渲染。

8.3.27 避免使用 v-model 和 v-text 混合使用

在使用 v-model 和 v-text 時，可能會導致不必要的重新渲染。

8.3.28 避免使用 v-model 和 Object.freeze 混合使用

在使用 v-model 和 Object.freeze 時，可能會導致不必要的重新渲染。

8.3.29 避免使用 v-model 和 $once 混合使用

在使用 v-model 和 $once 時，可能會導致不必要的重新渲染。

8.3.30 避免使用 v-model 和 $off 混合使用

在使用 v-model 和 $off 時，可能會導致不必要的重新渲染。

8.3.31 避免使用 v-model 和 $on 混合使用

在使用 v-model 和 $on 時，可能會導致不必要的重新渲染。

8.3.32 避免使用 v-model 和 $emit 混合使用

在使用 v-model 和 $emit 時，可能會導致不必要的重新渲染。

8.3.33 避免使用 v-model 和 $refs 混合使用

在使用 v-model 和 $refs 時，可能會導致不必要的重新渲染。

8.3.34 避免使用 v-model 和 $nextTick 混合使用

在使用 v-model 和 $nextTick 時，可能會導致不必要的重新渲染。

8.3.35 避免使用 v-model 和 vm.$forceUpdate 混合使用

在使用 v-model 和 vm.$forceUpdate 時，可能會導致不必要的重新渲染。

8.3.36 避免使用 v-model 和 vm.$set 混合使用

在使用 v-model 和 vm.$set 時，可能會導致不必要的重新渲染。

8.3.37 避免使用 v-model 和 vm.$delete 混合使用

在使用 v-model 和 vm.$delete 時，可能會導致不必要的重新渲染。

8.3.38 避免使用 v-model 和 vm.$watch 混合使用

在使用 v-model 和 vm.$watch 時，可能會導致不必要的重新渲染。

8.3.39 避免使用 v-model 和 vm.$watch 深度監聽混合使用

在使用 v-model 和 vm.$watch 深度監聽時，可能會導致不必要的重新渲染。

8.3.40 避免使用 v-model 和 vm.$watch 立即執行混合使用

在使用 v-model 和 vm.$watch 立即執行時，可能會導致不必要的重新渲染。

8.3.41 避免使用 v-model 和 vm.$set 數組混合使用

在使用 v-model 和 vm.$set 數組時，可能會導致不必要的重新渲染。

8.3.42 避免使用 v-model 和 vm.$delete 數組混合使用

在使用 v-model 和 vm.$delete 數組時，可能會導致不必要的重新渲染。

8.3.43 避免使用 v-model 和 vm.$watch 數組混合使用

在使用 v-model 和 vm.$watch 數組時，可能會導致不必要的重新渲染。

8.3.44 避免使用 v-model 和 vm.$watch 數組深度監聽混合使用

在使用 v-model 和 vm.$watch 數組深度監聽時，可能會導致不必要的重新渲染。

8.3.45 避免使用 v-model 和 vm.$watch 數組立即執行混合使用

在使用 v-model 和 vm.$watch 數組立即執行時，可能會導致不必要的重新渲染。

8.3.46 避免使用 v-model 和 vm.$set 對象混合使用

在使用 v-model 和 vm.$set 對象時，可能會導致不必要的重新渲染。

8.3.47 避免使用 v-model 和 vm.$delete 對象混合使用

在使用 v-model 和 vm.$delete 對象時，可能會導致不必要的重新渲染。

8.3.48 避免使用 v-model 和 vm.$watch 對象混合使用

在使用 v-model 和 vm.$watch 對象時，可能會導致不必要的重新渲染。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux 防火牆只允許指定IP 埠訪問
    開啟和關閉防火牆命令如下： 查看防火狀態 systemctl status firewalld 2:暫時關閉防火牆 systemctl stop firewalld 3:永久關閉防火牆 systemctl disable firewalld systemctl stop firewalld.serv ...
  • git 入門學習（持續學習ing）
    目錄為什麼要學習使用Git？什麼是Git?Git的下載和安裝1.進入Git官網，並跳轉到Windows版本下載界面2. 下載 64位Windows操作系統（也可以根據自己電腦實際信息進行選擇）3. 下載完成後，雙擊下載程式，一直點擊下一步即可完成安裝（一路回車法）4. 安裝完成後，在桌面空白處點擊右 ...
  • 成為MySQL DBA後，再看ORACLE資料庫（二、監聽與連接）
    在迅速變化的技術領域，本地環境的搭建和調試對於軟體開發的效率和效果至關重要。本文將詳細介紹如何為Apache DolphinScheduler搭建一個高效的本地開發環境，包括2.x和3.x版本的設置方法。 無論您是初學者還是有經驗的開發者，本指南都將幫助您快速啟動並運行，有效地進行本地代碼調試。 依 ...
  • 淺析MySQL 8.0直方圖原理
    本文將對直方圖概念進行介紹，藉助舉例描述直方圖的使用方式，對創建/刪除直方圖的原理進行淺析，並通過例子說明其應用場景。 ...
  • Mysql資料庫-數據模型
    1.關係型資料庫（RDBMS） 概念：建立在關係模型基礎上，由多張相互連接的二維表組成的資料庫。 二維表:指的是由行和列組成的表，如下圖（就類似於Excel表格數據，有表頭、有列、有行，還可以通過一列關聯另外一個表格中的某一列數據）。 MySQL、Oracle、DB2、SQLServer等都是屬於關 ...
  • MySQL 8.0 Reference Manual（讀書筆記59節--Understanding the Query Execution Plan(2)）
    簡介 資料庫索引對於優化資料庫性能至關重要。它們通過提供表中行的快速訪問路徑來幫助加快數據檢索速度。瞭解索引的工作原理、類型及其最佳實踐可以顯著提高資料庫查詢的效率。 什麼是索引？ 索引是一種數據結構，可以提高資料庫表上數據檢索操作的速度。它就像書中的索引一樣，讓您無需掃描整個文本即可快速找到信息。 ...
  • Android Media Framework - 開篇
    前言 線程是電腦中的一種執行單元，是操作系統進行調度的最小單位。它是進程中的實際運行單位，每個進程可以包含多個線程。線程可以理解為進程中的一個執行流，它獨立運行，擁有獨立的棧和寄存器，但共用進程的資源，如記憶體空間、文件等。線程通過併發執行，將一個進程的任務劃分成多個子任務並行處理，以提高程式的 ...
  • 鴻蒙HarmonyOS實戰-Stage模型（進程模型）
    前言 進程是電腦中運行的程式的實例。它是操作系統對正在執行的程式的一種抽象概念。每個進程都有自己的獨立記憶體空間、運行狀態和執行上下文。進程可以包含一個或多個線程，每個線程可以獨立執行一部分任務。操作系統通過分配和管理進程資源來實現多任務和併發執行。進程之間可以通過進程間通信機制進行數據交換和協 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類