【技術積累】Vue.js中的核心知識【四】

来源:https://www.cnblogs.com/yyyyfly1/archive/2023/07/22/17574543.html
-Advertisement-
Play Games

博客推行版本更新，成果積累制度，已經寫過的博客還會再次更新，不斷地琢磨，高質量高數量都是要追求的，工匠精神是學習必不可少的精神。因此，大家有何建議歡迎在評論區踴躍發言，你們的支持是我最大的動力，你們敢投，我就敢肝 ...


Vue的生命周期

Vue中的生命周期是指組件從創建到銷毀的整個過程中，會觸發一系列的鉤子函數

Vue2中的生命周期

Vue2中的生命周期鉤子函數是在組件的不同階段執行的特定函數。這些鉤子函數允許開發者在組件的不同生命周期階段執行自定義的邏輯。

Vue2中的生命周期鉤子函數可以分為8個階段，按照執行順序依次是：

  1. beforeCreate：在實例初始化之後，數據觀測和事件配置之前被調用。在這個階段，組件的數據和方法還未初始化，無法訪問到組件實例的屬性和方法。

  2. created：在實例創建完成後被調用。在這個階段，組件的數據和方法已經初始化完成，可以訪問到組件實例的屬性和方法。但是此時組件還未掛載到DOM上。

  3. beforeMount：在組件掛載到DOM之前被調用。在這個階段，組件已經完成了模板的編譯，但是還未將組件的模板渲染到真實的DOM中。

  4. mounted：在組件掛載到DOM之後被調用。在這個階段，組件的模板已經被渲染到真實的DOM中，可以進行DOM操作和訪問DOM元素。

  5. beforeUpdate：在組件更新之前被調用。在這個階段，組件的數據發生了變化，但是DOM尚未更新。可以在這個階段進行數據的修改和操作。

  6. updated：在組件更新之後被調用。在這個階段，組件的數據已經更新完成，DOM也已經更新。可以進行DOM操作和訪問DOM元素。

  7. beforeDestroy：在組件銷毀之前被調用。在這個階段，組件實例仍然可用，可以進行一些清理工作，如清除定時器、取消訂閱等。

  8. destroyed：在組件銷毀之後被調用。在這個階段，組件實例已經被銷毀，無法再訪問到組件實例的屬性和方法。

除了這些常用的生命周期鉤子函數外，Vue2還提供了一些其他的鉤子函數，如activated和deactivated，用於處理組件在keep-alive組件中的緩存和激活狀態的切換。

通過在這些生命周期鉤子函數中編寫邏輯，開發者可以在組件的不同階段執行自定義的操作，如初始化數據、發送請求、訂閱事件、操作DOM等。這些生命周期鉤子函數的使用可以幫助開發者更好地控制組件的行為和交互。

beforeCreate

在Vue2中，beforeCreate是一個生命周期鉤子函數，它在實例被創建之初被調用。在這個階段，實例的數據觀測和事件機制都尚未初始化，因此在beforeCreate中無法訪問到data、computed、methods等實例屬性和方法。

下麵是一個案例來說明beforeCreate的使用：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    console.log("beforeCreate hook");
    this.message = "Hello Vue!";
  },
  created() {
    console.log("created hook");
  },
  data() {
    return {
      message: ""
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在上面的代碼中，我們定義了一個Vue組件，其中使用了beforeCreate鉤子函數。在beforeCreate中，我們列印了一條消息並給message屬性賦值。然後在模板中使用了message屬性來顯示文本。

當我們運行這個組件時，控制台會輸出"beforeCreate hook"，然後頁面上會顯示"Hello Vue!"。

解釋代碼：

- 在beforeCreate鉤子函數中，我們可以執行一些初始化的操作，但是此時實例的數據和方法還沒有被初始化，因此無法訪問data、computed、methods等屬性和方法。

- 在created鉤子函數中，實例的數據和方法已經被初始化，可以訪問data、computed、methods等屬性和方法。

需要註意的是，beforeCreate鉤子函數是在實例被創建之前被調用的，因此在這個階段無法訪問到實例的DOM元素。如果需要操作DOM元素，可以在mounted鉤子函數中進行操作。

created函數

在Vue2中，created是一個生命周期鉤子函數，它在實例被創建之後被調用。在這個階段，實例的數據觀測和事件機制都已經初始化完成，可以訪問到data、computed、methods等實例屬性和方法。

下麵是一個案例來說明created的使用：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  created() {
    console.log("created hook");
    this.message = "Hello Vue!";
  },
  data() {
    return {
      message: ""
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在上面的代碼中，我們定義了一個Vue組件，其中使用了created鉤子函數。在created中，我們列印了一條消息並給message屬性賦值。然後在模板中使用了message屬性來顯示文本。

當我們運行這個組件時，控制台會輸出"created hook"，然後頁面上會顯示"Hello Vue!"。

解釋代碼：
- 在created鉤子函數中，實例的數據和方法已經被初始化，可以訪問data、computed、methods等屬性和方法。
- 在created鉤子函數中，我們可以執行一些初始化的操作，例如發送網路請求、訂閱事件等。
- 在created鉤子函數中，我們可以對實例的屬性進行修改和操作，例如給message屬性賦值。

需要註意的是，created鉤子函數是在實例被創建之後被調用的，因此在這個階段可以訪問到實例的DOM元素。如果需要操作DOM元素，可以在mounted鉤子函數中進行操作。

beforeMount

在Vue2中，beforeMount是一個生命周期鉤子函數，它在實例被掛載到DOM之前被調用。在這個階段，模板已經編譯完成，但是尚未將實例掛載到DOM上。

下麵是一個案例來說明beforeMount的使用：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  beforeMount() {
    console.log("beforeMount hook");
    this.message = "Hello Vue!";
  },
  mounted() {
    console.log("mounted hook");
  },
  data() {
    return {
      message: ""
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在上面的代碼中，我們定義了一個Vue組件，其中使用了beforeMount鉤子函數。在beforeMount中，我們列印了一條消息並給message屬性賦值。然後在模板中使用了message屬性來顯示文本。

當我們運行這個組件時，控制台會輸出"beforeMount hook"，然後頁面上會顯示"Hello Vue!"。

解釋代碼：
- 在beforeMount鉤子函數中，模板已經編譯完成，但是尚未將實例掛載到DOM上，因此無法訪問到實例的DOM元素。
- 在beforeMount鉤子函數中，我們可以對實例的屬性進行修改和操作，例如給message屬性賦值。
- 在mounted鉤子函數中，實例已經被掛載到DOM上，可以訪問到實例的DOM元素。

需要註意的是，beforeMount鉤子函數是在實例被掛載到DOM之前被調用的，因此在這個階段無法訪問到實例的DOM元素。如果需要操作DOM元素，可以在mounted鉤子函數中進行操作。

mounted

在Vue2中，mounted是一個生命周期鉤子函數，它在實例被掛載到DOM之後被調用。在這個階段，實例已經被掛載到DOM上，可以訪問到實例的DOM元素。

下麵是一個案例來說明mounted的使用：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log("mounted hook");
    this.message = "Hello Vue!";
  },
  data() {
    return {
      message: ""
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在上面的代碼中，我們定義了一個Vue組件，其中使用了mounted鉤子函數。在mounted中，我們列印了一條消息並給message屬性賦值。然後在模板中使用了message屬性來顯示文本。

當我們運行這個組件時，控制台會輸出"mounted hook"，然後頁面上會顯示"Hello Vue!"。

解釋代碼：
- 在mounted鉤子函數中，實例已經被掛載到DOM上，可以訪問到實例的DOM元素。
- 在mounted鉤子函數中，我們可以執行一些需要操作DOM元素的操作，例如獲取DOM元素的尺寸、綁定事件等。
- 在mounted鉤子函數中，我們可以對實例的屬性進行修改和操作，例如給message屬性賦值。

需要註意的是，mounted鉤子函數是在實例被掛載到DOM之後被調用的，因此在這個階段可以訪問到實例的DOM元素。如果需要在實例被掛載到DOM之前執行一些操作，可以使用beforeMount鉤子函數。

beforeUpdate

在Vue2中，beforeUpdate是一個生命周期鉤子函數，它在數據更新之前被調用。在這個階段，實例的數據已經發生了改變，但是DOM尚未更新。

下麵是一個案例來說明beforeUpdate的使用：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  beforeUpdate() {
    console.log("beforeUpdate hook");
  },
  methods: {
    updateMessage() {
      this.message = "Updated Message";
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在上面的代碼中，我們定義了一個Vue組件，其中使用了beforeUpdate鉤子函數。在beforeUpdate中，我們列印了一條消息。我們還定義了一個按鈕，當點擊按鈕時，會更新message的值。

當我們運行這個組件時，當點擊按鈕時，控制台會輸出"beforeUpdate hook"，然後頁面上會顯示"Updated Message"。

解釋代碼：
- 在beforeUpdate鉤子函數中，實例的數據已經發生了改變，但是DOM尚未更新。
- 在beforeUpdate鉤子函數中，我們可以執行一些在數據更新之前需要進行的操作，例如發送網路請求、更新其他數據等。

需要註意的是，beforeUpdate鉤子函數是在數據更新之前被調用的，因此在這個階段無法訪問到更新後的DOM。如果需要在數據更新之後執行一些操作，可以使用updated鉤子函數。

updated

在Vue2中，updated是一個生命周期鉤子函數，它在數據更新之後被調用。在這個階段，實例的數據已經發生了改變，並且DOM也已經更新完成。

下麵是一個案例來說明updated的使用：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  updated() {
    console.log("updated hook");
  },
  methods: {
    updateMessage() {
      this.message = "Updated Message";
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在上面的代碼中，我們定義了一個Vue組件，其中使用了updated鉤子函數。在updated中，我們列印了一條消息。我們還定義了一個按鈕，當點擊按鈕時，會更新message的值。

當我們運行這個組件時，當點擊按鈕時，頁面上會顯示"Updated Message"，並且控制台會輸出"updated hook"。

解釋代碼：
- 在updated鉤子函數中，實例的數據已經發生了改變，並且DOM也已經更新完成。
- 在updated鉤子函數中，我們可以執行一些在數據更新之後需要進行的操作，例如操作更新後的DOM元素、執行一些額外的邏輯等。

需要註意的是，updated鉤子函數是在數據更新之後被調用的，因此在這個階段可以訪問到更新後的DOM。如果需要在數據更新之前執行一些操作，可以使用beforeUpdate鉤子函數。

beforeDestroy

在Vue2中，beforeDestroy是一個生命周期鉤子函數，它在實例銷毀之前被調用。在這個階段，實例仍然完全可用，可以訪問到實例的屬性和方法。

下麵是一個案例來說明beforeDestroy的使用：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="destroyComponent">Destroy Component</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  beforeDestroy() {
    console.log("beforeDestroy hook");
  },
  methods: {
    destroyComponent() {
      this.$destroy();
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在上面的代碼中，我們定義了一個Vue組件，其中使用了beforeDestroy鉤子函數。在beforeDestroy中，我們列印了一條消息。我們還定義了一個按鈕，當點擊按鈕時，會銷毀組件。

當我們運行這個組件時，當點擊按鈕時，控制台會輸出"beforeDestroy hook"，然後組件會被銷毀。

解釋代碼：
- 在beforeDestroy鉤子函數中，實例仍然完全可用，可以訪問到實例的屬性和方法。
- 在beforeDestroy鉤子函數中，我們可以執行一些在實例銷毀之前需要進行的操作，例如清除定時器、取消訂閱等。

需要註意的是，beforeDestroy鉤子函數是在實例銷毀之前被調用的，因此在這個階段實例仍然可用。如果需要在實例銷毀之後執行一些操作，可以使用destroyed鉤子函數。

destoryed

在Vue2中，destroyed是一個生命周期鉤子函數，它在實例銷毀之後被調用。在這個階段，實例已經被完全銷毀，無法再訪問到實例的屬性和方法。

下麵是一個案例來說明destroyed的使用：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="destroyComponent">Destroy Component</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  destroyed() {
    console.log("destroyed hook");
  },
  methods: {
    destroyComponent() {
      this.$destroy();
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在上面的代碼中，我們定義了一個Vue組件，其中使用了destroyed鉤子函數。在destroyed中，我們列印了一條消息。我們還定義了一個按鈕，當點擊按鈕時，會銷毀組件。

當我們運行這個組件時，當點擊按鈕時，組件會被銷毀，控制台會輸出"destroyed hook"。

解釋代碼：
- 在destroyed鉤子函數中，實例已經被完全銷毀，無法再訪問到實例的屬性和方法。
- 在destroyed鉤子函數中，我們可以執行一些在實例銷毀之後需要進行的操作，例如清除全局事件監聽器、釋放資源等。

需要註意的是，destroyed鉤子函數是在實例銷毀之後被調用的，因此在這個階段無法再訪問到實例的屬性和方法。如果需要在實例銷毀之前執行一些操作，可以使用beforeDestroy鉤子函數。

Vue3中的生命周期

Vue 3的生命周期相對於Vue 2有所改變，主要是為了更好地支持Composition API。以下是Vue 3的生命周期：

  1. setup：在組件實例化之前被調用。在這個階段，可以進行組件的初始化工作，包括響應式數據的設置、計算屬性的定義、方法的定義等。

  2. beforeCreate：在組件實例創建之前被調用。在這個階段，可以進行一些初始化工作，但是無法訪問到響應式數據和組件實例。

  3. created：在組件實例創建完成後被立即調用。在這個階段，可以訪問到響應式數據和組件實例，可以進行一些數據的初始化操作。

  4. beforeMount：在組件掛載開始之前被調用。在這個階段，模板已經編譯完成，但是還未掛載到頁面上。

  5. mounted：在組件掛載完成後被調用。在這個階段，組件已經被掛載到頁面上，可以進行DOM操作。

  6. beforeUpdate：在組件更新之前被調用。在這個階段，可以進行一些數據的修改操作。

  7. updated：在組件更新之後被調用。在這個階段，可以執行依賴於DOM的操作。

  8. beforeUnmount：在組件卸載之前被調用。在這個階段，組件仍然可用，可以進行一些清理工作。

  9. unmounted：在組件卸載之後被調用。在這個階段，組件的指令和事件監聽器已經被移除，組件實例被銷毀。

通過這些生命周期鉤子函數，我們可以在不同的階段執行相應的操作，比如在setup階段進行組件的初始化，mounted階段進行DOM操作，beforeUnmount階段進行資源清理等。同時，Vue 3還引入了更靈活的Composition API，可以更好地組織和復用組件邏輯。

beforeMount

在Vue3中，beforeMount是一個選項式API的生命周期函數，它在掛載開始之前被調用。在beforeMount階段，模板編譯已完成，但是尚未將模板渲染到DOM中。

下麵是一個使用beforeMount的案例，通過在beforeMount中修改DOM元素的樣式來展示其使用方法：

<template>
  <div>
    <p ref="message">{{ message }}</p>
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue';

const message = ref('Hello, Vue3!');

onBeforeMount(() => {
  console.log('beforeMount hook');
  const messageElement = document.querySelector('#message');
  messageElement.style.color = 'red';
});
</script>

<style scoped>
/* 樣式 */
</style>

在上述代碼中，我們首先導入了onBeforeMount和ref函數。然後，在onBeforeMount函數中，我們列印了一條消息，並通過document.querySelector方法獲取到<p>元素的引用，然後修改其樣式為紅色。

當組件掛載開始之前，beforeMount函數會被調用，控制台會輸出'beforeMount hook'，同時<p>元素的文字顏色會變為紅色。

需要註意的是，beforeMount函數中可以訪問到組件實例的數據和方法，因為此時組件實例已經創建完成。同時，beforeMount函數中可以直接操作DOM元素，但是建議使用Vue的響應式數據來管理DOM的狀態，以便更好地利用Vue的特性。

總結：beforeMount函數在掛載開始之前被調用，可以用於在DOM渲染之前進行一些操作，例如修改DOM元素的樣式、添加事件監聽器等。

mounted

在Vue3中，mounted是一個選項式API的生命周期函數，它在組件掛載到DOM之後調用。在mounted階段，組件已經被渲染到DOM中，可以進行DOM操作和訪問DOM元素。

下麵是一個使用mounted的案例，通過在mounted中添加一個事件監聽器來展示其使用方法：

<template>
  <div>
    <button ref="button">Click me</button>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

onMounted(() => {
  console.log('mounted hook');
  const buttonElement = document.querySelector('#button');
  buttonElement.addEventListener('click', handleClick);
});

function handleClick() {
  console.log('Button clicked');
}
</script>

<style scoped>
/* 樣式 */
</style>

在上述代碼中，我們使用onMounted函數來註冊一個回調函數，在組件掛載到DOM之後調用。在回調函數中，我們列印了一條消息，並通過document.querySelector方法獲取到<button>元素的引用，然後添加了一個點擊事件的監聽器。

當組件掛載到DOM之後，mounted函數會被調用，控制台會輸出'mounted hook'。同時，當點擊按鈕時，控制台會輸出'Button clicked'。

需要註意的是，mounted函數中可以訪問到組件實例的數據和方法，因為此時組件已經被渲染到DOM中。同時，mounted函數中可以進行一些需要訪問DOM元素的操作，例如添加事件監聽器、初始化第三方庫等。

總結：mounted函數在組件掛載到DOM之後調用，可以用於進行一些需要訪問DOM元素的操作，例如添加事件監聽器、初始化第三方庫等。

beforeUpdate

在Vue3中，beforeUpdate是一個選項式API的生命周期函數，它在組件更新之前調用。在beforeUpdate階段，組件的數據已經發生了改變，但是DOM尚未更新。

下麵是一個使用beforeUpdate的案例，通過在beforeUpdate中列印更新前後的數據來展示其使用方法：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script setup>
import { onBeforeUpdate, ref } from 'vue';

const message = ref('Hello, Vue3!');

onBeforeUpdate(() => {
  console.log('beforeUpdate hook');
  console.log('Previous message:', message.value);
});

function updateMessage() {
  message.value = 'Updated message';
}
</script>

<style scoped>
/* 樣式 */
</style>

在上述代碼中，我們使用beforeUpdate函數來註冊一個回調函數，在組件更新之前調用。在回調函數中，我們列印了一條消息，並輸出了更新前的message的值。

在模板中，我們展示了message的值，並提供了一個按鈕，點擊按鈕會調用updateMessage函數來更新message的值。

當點擊按鈕時，updateMessage函數會被調用，message的值會發生改變。然後，beforeUpdate函數會被調用，控制台會輸出'beforeUpdate hook'和'Previous message: Hello, Vue3!'，即更新前的message的值。

需要註意的是，beforeUpdate函數中可以訪問到組件實例的數據和方法，因為此時組件的數據已經發生了改變。同時，beforeUpdate函數中可以進行一些在組件更新之前的操作，例如獲取更新前的數據、做一些準備工作等。

總結：beforeUpdate函數在組件更新之前調用，可以用於進行一些在組件更新之前的操作，例如獲取更新前的數據、做一些準備工作等。

updated

在Vue3中，updated是一個選項式API的生命周期函數，它在組件更新完成後調用。在updated階段，組件的數據已經發生了改變，並且DOM也已經更新完畢。

下麵是一個使用updated的案例，通過在updated中列印更新後的數據來展示其使用方法：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script setup>
import { onUpdated, ref } from 'vue';

const message = ref('Hello, Vue3!');

onUpdated(() => {
  console.log('updated hook');
  console.log('Updated message:', message.value);
});

function updateMessage() {
  message.value = 'Updated message';
}
</script>

<style scoped>
/* 樣式 */
</style>

在上述代碼中，我們使用onUpdated函數來註冊一個回調函數，在組件更新完成後調用。在回調函數中，我們列印了一條消息，並輸出了更新後的message的值。

在模板中，我們展示了message的值，並提供了一個按鈕，點擊按鈕會調用updateMessage函數來更新message的值。

當點擊按鈕時，updateMessage函數會被調用，message的值會發生改變。然後，onUpdated函數會被調用，控制台會輸出'updated hook'和'Updated message: Updated message'，即更新後的message的值。

需要註意的是，onUpdated函數中可以訪問到組件實例的數據和方法，因為此時組件的數據已經發生了改變，並且DOM也已經更新完畢。同時，onUpdated函數中可以進行一些在組件更新完成後的操作，例如獲取更新後的數據、執行一些額外的邏輯等。

總結：updated函數在組件更新完成後調用，可以用於進行一些在組件更新完成後的操作，例如獲取更新後的數據、執行一些額外的邏輯等。

beforeUnmount

在Vue3中，beforeUnmount是一個選項式API的生命周期函數，它在組件卸載之前調用。在beforeUnmount階段，組件即將從DOM中被移除。

下麵是一個使用beforeUnmount的案例，通過在beforeUnmount中執行一些清理操作來展示其使用方法：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="unmountComponent">Unmount Component</button>
  </div>
</template>

<script setup>
import { onBeforeUnmount, ref } from 'vue';

const message = ref('Hello, Vue3!');

onBeforeUnmount(() => {
  console.log('onBeforeUnmount hook');
  // 執行一些清理操作
});

function unmountComponent() {
  // 卸載組件
}
</script>

<style scoped>
/* 樣式 */
</style>

在上述代碼中，我們使用onBeforeUnmount函數來註冊一個回調函數，在組件卸載之前調用。在回調函數中，我們列印了一條消息，並可以執行一些清理操作，例如取消訂閱、清除定時器等。

在模板中，我們展示了message的值，並提供了一個按鈕，點擊按鈕會調用unmountComponent函數來卸載組件。

當點擊按鈕時，unmountComponent函數會被調用，組件會被卸載。然後，onBeforeUnmount函數會被調用，控制台會輸出'onBeforeUnmount hook'，即組件即將被卸載。

需要註意的是，onBeforeUnmount函數中可以訪問到組件實例的數據和方法，因為此時組件即將被卸載。同時，onBeforeUnmount函數中可以進行一些在組件卸載之前的清理操作，例如取消訂閱、清除定時器等。

總結：onBeforeUnmount函數在組件卸載之前調用，可以用於進行一些在組件卸載之前的清理操作，例如取消訂閱、清除定時器等。

unmounted

在Vue3中，unmounted是一個選項式API的生命周期函數，它在組件卸載完成後調用。在unmounted階段，組件已經從DOM中被移除。

下麵是一個使用unmounted的案例，通過在unmounted中執行一些清理操作來展示其使用方法：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="unmountComponent">Unmount Component</button>
  </div>
</template>

<script setup>
import { onUnmounted, ref } from 'vue';

const message = ref('Hello, Vue3!');

onUnmounted(() => {
  console.log('unmounted hook');
  // 執行一些清理操作
});

function unmountComponent() {
  // 卸載組件
}
</script>

<style scoped>
/* 樣式 */
</style>

在上述代碼中，我們使用onUnmounted函數來註冊一個回調函數，在組件卸載完成後調用。在回調函數中，我們列印了一條消息，並可以執行一些清理操作，例如取消訂閱、清除定時器等。

在模板中，我們展示了message的值，並提供了一個按鈕，點擊按鈕會調用unmountComponent函數來卸載組件。

當點擊按鈕時，unmountComponent函數會被調用，組件會被卸載。然後，onUnmounted函數會被調用，控制台會輸出'unmounted hook'，即組件已經被卸載。

需要註意的是，onUnmounted函數中可以訪問到組件實例的數據和方法，因為此時組件已經被卸載。同時，onUnmounted函數中可以進行一些在組件卸載完成後的清理操作，例如取消訂閱、清除定時器等。

總結：unmounted函數在組件卸載完成後調用，可以用於進行一些在組件卸載完成後的清理操作，例如取消訂閱、清除定時器等。

在黑夜裡夢想著光，心中覆蓋悲傷，在悲傷里忍受孤獨，空守一絲溫暖。 我的淚水是無底深海，對你的愛已無言，相信無盡的力量，那是真愛永在。 我的信仰是無底深海，澎湃著心中火焰，燃燒無盡的力量，那是忠誠永在。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 淺談C#中取消令牌CancellationTokenSource
    基礎操作 CancellationTokenSource cancellationTokenSource = new CancellationTokenSource(); cancellationTokenSource.Token.Register(() => { Console.WriteLine ...
  • PerfView專題 (第十五篇)： 如何洞察 C# 中的慢速方法
    ## 一：背景 ### 1. 講故事 在 dump 分析旅程中，經常會遇到很多朋友反饋一類問題，比如： * 方法平時都執行的特別快，但有時候會特別慢，怎麼排查？ * 我的方法第一次執行特別慢，能看到慢在哪裡嗎？ 相信有朋友肯定說，加些日誌不就好了，大方向肯定是沒問題的，但加日誌的顆粒度會比較粗而且侵 ...
  • 除了Visual Studio，Rider也能開發.NET（文中有料）
    **前言** 小編在油管學習.NET知識，刷到一個外國小哥在用一個類似Idea的IDE開發.NET。出於好奇，小編在某谷搜索Idea支持.NET嗎？結果當然不支持，Idea主要是開發Java的IDE。幸好搜索引擎有個圖片搜索功能，於是拿圖片搜索了這個IDE，原來它的名字叫Rider，是Idea同一家 ...
  • Unity UGUI的VerticalLayoutGroup（垂直佈局）組件的介紹及使用
    # Unity UGUI的VerticalLayoutGroup（垂直佈局）組件的介紹及使用 ## 1. 什麼是VerticalLayoutGroup組件？ VerticalLayoutGroup是Unity UGUI中的一種佈局組件，用於在垂直方向上自動排列子對象。它可以根據子對象的大小和佈局設置 ...
  • 工具 --- IL指令集解釋
    ## 引言 彙總一下所有的 .NET IL 指令，以及它們的名稱、操作碼值、堆棧轉換行為和描述。 作為反編譯IL代碼時的查詢字典。 ## IL 指令集列表 以下內容來自[微軟官方文檔](https://learn.microsoft.com/en-us/dotnet/api/system.refle ...
  • 使用Free Pascal開發STM32程式
    ### 一、文件、目錄許可權和所有者 簡介：用戶對一個文件或目錄具有訪問許可權，這些訪問許可權決定了誰能訪問，以及如何範圍這些文件和目錄。通過設置許可權可以限制或允許以下三種用戶訪問： - 文件的用戶所有者（屬主） - 文件的組群所有者（用戶所在組的同組用戶） - 系統中的其他用戶 在linux系統中，每一 ...
  • ESP32連接MQ Sensor實現氣味反應
    > ## ESP32連接MQ Sensor實現氣味反應 > > > ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/1961512734a74deb9d455b59cb1ccdab.png#pic_center) > > > | [ESP32+MQTT+MySQL實 ...
  • MySQL——GROUP BY詳解與優化
    > 在 MySQL 中，GROUP BY用於將具有指定列中相同值的行分組在一起。這是在處理大量數據時非常有用的功能，允許對數據進行分類和聚合。 # 基本使用 ## 語法 以下是GROUP BY子句的基本語法： """ SELECT col1, col2, ..., aggregate_functio ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類