快捷導(dǎo)航

Vue 3中常用的生命周期鉤子和監(jiān)聽(tīng)器的操作方法

更新時(shí)間：2024年07月17日 11:43:24 作者：碼農(nóng)研究僧

這篇文章主要介紹了Vue 3中常用的生命周期鉤子和監(jiān)聽(tīng)器的操作方法,分析常用的一些生命周期鉤子和監(jiān)聽(tīng)器可以幫助我們?cè)诮M件中處理數(shù)據(jù)加載、狀態(tài)變化和響應(yīng)式更新,需要的朋友可以參考下

前言

分析常用的一些生命周期鉤子和監(jiān)聽(tīng)器可以幫助我們?cè)诮M件中處理數(shù)據(jù)加載、狀態(tài)變化和響應(yīng)式更新

1. onMounted

生命周期鉤子，在組件掛載后執(zhí)行。它適合用于初始化數(shù)據(jù)加載或執(zhí)行一次性的操作

<template>
  <div>
    <p>當(dāng)前用戶ID: {{ userId }}</p>
    <button @click="fetchUserData">加載用戶數(shù)據(jù)</button>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import UserDataApi from 'path-to-your-api'; // 假設(shè)這是你的數(shù)據(jù)接口
const userId = ref(null);
const userData = ref(null);
onMounted(async () => {
  // 初始化加載數(shù)據(jù)
  await fetchUserData();
});
const fetchUserData = async () => {
  const response = await UserDataApi.getUserData();
  userId.value = response.userId;
  userData.value = response.userData;
};
</script>

2. watch

監(jiān)聽(tīng)指定的響應(yīng)式數(shù)據(jù)，并在數(shù)據(jù)變化時(shí)執(zhí)行回調(diào)函數(shù)

有兩種形式：基礎(chǔ)的 watch 和 watchEffect

<template>
  <div>
    <p>當(dāng)前計(jì)數(shù): {{ count }}</p>
    <button @click="increment">增加計(jì)數(shù)</button>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
  console.log(`計(jì)數(shù)從 ${oldValue} 變?yōu)?${newValue}`);
});
const increment = () => {
  count.value++;
};
</script>

watchEffect 在其依賴(lài)變化時(shí)立即執(zhí)行傳入的回調(diào)函數(shù)

<template>
  <div>
    <p>當(dāng)前時(shí)間: {{ currentTime }}</p>
  </div>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
const currentTime = ref(new Date());
watchEffect(() => {
  console.log('更新當(dāng)前時(shí)間');
  currentTime.value = new Date();
});
// 模擬定時(shí)更新時(shí)間
setInterval(() => {
  currentTime.value = new Date();
}, 1000);
</script>

3. computed

computed: 計(jì)算屬性，基于響應(yīng)式數(shù)據(jù)派生出新的數(shù)據(jù)，并自動(dòng)緩存結(jié)果

<template>
  <div>
    <p>原始數(shù)值: {{ originalValue }}</p>
    <p>加倍后的值: {{ doubledValue }}</p>
    <button @click="increment">增加數(shù)值</button>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';
const originalValue = ref(5);
const doubledValue = computed(() => originalValue.value * 2);
const increment = () => {
  originalValue.value++;
};
</script>

4. 其他

reactive: 創(chuàng)建一個(gè)完全響應(yīng)式的對(duì)象或數(shù)組

<template>
  <div>
    <p>當(dāng)前用戶: {{ user.name }}</p>
    <button @click="changeUserName">修改用戶名</button>
  </div>
</template>
<script setup>
import { reactive } from 'vue';
const user = reactive({
  name: 'John Doe',
  age: 30
});
const changeUserName = () => {
  user.name = 'Jane Smith';
};
</script>

ref: 創(chuàng)建一個(gè)響應(yīng)式的引用，通常用于包裝基本類(lèi)型值

<template>
  <div>
    <p>當(dāng)前計(jì)數(shù): {{ count.value }}</p>
    <button @click="increment">增加計(jì)數(shù)</button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

到此這篇關(guān)于Vue 3中常用的生命周期鉤子和監(jiān)聽(tīng)器的詳細(xì)分析的文章就介紹到這了,更多相關(guān)Vue 3生命周期鉤子和監(jiān)聽(tīng)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: