湖北省建设工程教育协会网站,好的网页网站设计,cms系统登录,莱芜 网站概念#xff1a;Vue组件实例在创建时要经历一系列的初始化步骤#xff0c;在此过程中Vue会在合适的时机#xff0c;调用特定的函数#xff0c;从而让开发者有机会在特定阶段运行自己的代码#xff0c;这些特定的函数统称为#xff1a;生命周期钩子。 规律#xff1a; 生…概念Vue组件实例在创建时要经历一系列的初始化步骤在此过程中Vue会在合适的时机调用特定的函数从而让开发者有机会在特定阶段运行自己的代码这些特定的函数统称为生命周期钩子。 规律 生命周期整体分为四个阶段分别是创建、挂载、更新、销毁每个阶段都有两个钩子一前一后。 Vue2的生命周期 创建阶段beforeCreate、created 挂载阶段beforeMount、mounted 更新阶段beforeUpdate、updated 销毁阶段beforeDestroy、destroyed Vue3的生命周期 创建阶段setup 挂载阶段onBeforeMount、onMounted 更新阶段onBeforeUpdate、onUpdated 卸载阶段onBeforeUnmount、onUnmounted 常用的钩子onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前) 示例代码
templatediv classpersonh2当前求和为{{ sum }}/h2button clickchangeSum点我sum1/button/div
/template!-- vue3写法 --
script langts setup namePersonimport { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from vue// 数据let sum ref(0)// 方法function changeSum() {sum.value 1}console.log(setup)// 生命周期钩子onBeforeMount((){console.log(挂载之前)})onMounted((){console.log(挂载完毕)})onBeforeUpdate((){console.log(更新之前)})onUpdated((){console.log(更新完毕)})onBeforeUnmount((){console.log(卸载之前)})onUnmounted((){console.log(卸载完毕)})
/script
