Vue 3中常用的生命周期钩子和监听器的操作方法

<template>
  <div>
    <p>当前用户ID: {{ userId }}</p>
    <button @click="fetchUserData">加载用户数据</button>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import UserDataApi from 'path-to-your-api'; // 假设这是你的数据接口
const userId = ref(null);
const userData = ref(null);
onMounted(async () => {
  // 初始化加载数据
  await fetchUserData();
});
const fetchUserData = async () => {
  const response = await UserDataApi.getUserData();
  userId.value = response.userId;
  userData.value = response.userData;
};
</script>

<template>
  <div>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加计数</button>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
  console.log(`计数从 ${oldValue} 变为 ${newValue}`);
});
const increment = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>当前时间: {{ currentTime }}</p>
  </div>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
const currentTime = ref(new Date());
watchEffect(() => {
  console.log('更新当前时间');
  currentTime.value = new Date();
});
// 模拟定时更新时间
setInterval(() => {
  currentTime.value = new Date();
}, 1000);
</script>

<template>
  <div>
    <p>原始数值: {{ originalValue }}</p>
    <p>加倍后的值: {{ doubledValue }}</p>
    <button @click="increment">增加数值</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>

<template>
  <div>
    <p>当前用户: {{ 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>

<template>
  <div>
    <p>当前计数: {{ count.value }}</p>
    <button @click="increment">增加计数</button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
  count.value++;
};
</script>