Vue 3中常用的生命周期钩子和监听器的详细分析

目录

  • 前言
  • [1. onMounted](#1. onMounted)
  • [2. watch](#2. watch)
  • [3. computed](#3. computed)
  • [4. 其他](#4. 其他)

前言

分析常用的一些生命周期钩子和监听器可以帮助我们在组件中处理数据加载、状态变化和响应式更新

1. onMounted

生命周期钩子,在组件挂载后执行。它适合用于初始化数据加载或执行一次性的操作

html 复制代码
<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>

2. watch

监听指定的响应式数据,并在数据变化时执行回调函数

有两种形式:基础的 watch 和 watchEffect

html 复制代码
<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>

watchEffect 在其依赖变化时立即执行传入的回调函数

html 复制代码
<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>

3. computed

computed: 计算属性,基于响应式数据派生出新的数据,并自动缓存结果

html 复制代码
<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>

4. 其他

reactive: 创建一个完全响应式的对象或数组

html 复制代码
<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>

ref: 创建一个响应式的引用,通常用于包装基本类型值

html 复制代码
<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>
相关推荐
麦麦大数据3 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区4 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗4 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长4 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅5 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_5 小时前
Chrome开发者工具
前端·chrome
YiHanXii5 小时前
this 输出题
前端·javascript·1024程序员节
楊无好6 小时前
React中ref
前端·react.js
维他命Coco6 小时前
js常见开发学习
javascript
程琬清君6 小时前
vue3 confirm倒计时
前端·1024程序员节