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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類