vue3-生命周期钩子函数

在 Vue 3 中,**生命周期函数**是指在组件的不同阶段自动执行的一些特殊函数。这些函数就像组件的"生老病死"的各个阶段,你可以在不同阶段执行不同的操作。

生命周期的主要阶段:

1. **创建阶段**(组件还没有出现在页面上)

  • `setup()`:在组件实例创建之前调用,适合初始化数据。

  • `onBeforeMount()`:在组件挂载到 DOM 之前调用。

2. **挂载阶段**(组件已经被显示在页面上)

  • `onMounted()`:在组件挂载到 DOM 后调用,通常用来操作 DOM 或发起网络请求。

3. **更新阶段**(数据变化后)

  • `onBeforeUpdate()`:在响应式数据更新前调用。

  • `onUpdated()`:在响应式数据更新并渲染完成后调用。

4. **销毁阶段**(组件从页面上移除)

  • `onBeforeUnmount()`:组件被卸载前调用。

  • `onUnmounted()`:组件被完全卸载后调用。

如何使用生命周期函数?

在 Vue 3 中使用 **Composition API**,你可以在 `setup` 里引入这些函数:

javascript

javascript 复制代码
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log('组件已经挂载到页面上了!');
    });

    onUnmounted(() => {
      console.log('组件即将被移除!');
    });

    return { count };
  }
};

总结:

生命周期函数让你在不同的组件阶段执行特定的代码,比如初始化数据、监听事件、操作 DOM 或清理资源。

代码解析:

javascript 复制代码
const app = Vue.createApp({
  data() {
    return {
      posts: [], // 定义响应式数据 posts,初始值为空数组
    };
  },
  methods: {
    async fetchPosts() {
      // 定义一个异步方法,用于获取数据
      const res = await fetch("./posts.json"); 
      // 使用 fetch 获取本地 JSON 文件,返回一个 Promise
      const postsData = await res.json();
      // 解析返回的 JSON 数据,并赋值给变量 postsData
      this.posts = postsData;
      // 将获取到的数据赋值给 Vue 的响应式属性 posts
    },
  },
  created() {
    // 生命周期函数:组件实例被创建后立即执行
    this.fetchPosts(); 
    // 调用 fetchPosts 方法,开始获取数据
  },
});

const vm = app.mount("#app");
// 将 Vue 应用实例挂载到 HTML 中 id 为 "app" 的 DOM 元素上
相关推荐
群联云防护小杜12 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2425 分钟前
html复习
javascript·microsoft·html
汉得数字平台30 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹36 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows