欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 房产 > 建筑 > Vue生命周期_Vue生命周期钩子

Vue生命周期_Vue生命周期钩子

2025/3/19 18:47:48 来源:https://blog.csdn.net/u011127019/article/details/146280366  浏览:    关键词:Vue生命周期_Vue生命周期钩子

一、生命周期介绍

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。

在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。

二、常用生命周期事件

onCreated

组件创建时候触发执行。

onMounted

注册一个回调函数,在组件挂载完成后执行。

使用案例:

<template><h1 v-for="item in array">测试{{item}}</h1>
</template><script>
export default {data(){return{array:[1,2,3]}},created:function(){//可以用来加载数据console.info('组件创建时候触发');},mounted:function(){//可以用来二次渲染页面console.info('组件渲染结束触发');}
}
</script>

setup 风格:

<script setup>
import { onMounted } from 'vue'onMounted(() => {console.log(`the component is now mounted.`)
})
</script>

三、生命周期演示图

更多:

Vue 概念、历史、发展和Vue简介-CSDN博客

Vue3.4+element-plus2.5 + Vite 搭建教程整理_vue 3.4 element-CSDN博客

Vite 下一代的前端工具链,前端开发与构建工具_vite5为什么叫工具链-CSDN博客

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词