网站建设四川,济宁网站建设 悍诺,怎么在门户网站上发布,移动做网站吗一、生命周期的概念
Vue组件实例在创建时要经历一系列的初始化步骤#xff0c;在此过程中Vue会在合适的时机#xff0c;调用特定的函数#xff0c;从而让开发者有机会在特定阶段运行自己的代码#xff0c;这些特定的函数统称为#xff1a;生命周期钩子#xff08;也会叫…一、生命周期的概念
Vue组件实例在创建时要经历一系列的初始化步骤在此过程中Vue会在合适的时机调用特定的函数从而让开发者有机会在特定阶段运行自己的代码这些特定的函数统称为生命周期钩子也会叫生命周期函数
二、生命周期的规律
生命周期整体分为四个阶段分别是创建、挂载、更新、销毁每个阶段都有两个钩子一前一后。
三、Vue2 VS Vue3生命周期
生命周期Vue 2Vue 3备注创建阶段beforeCreate、createdsetupvue3创建阶段只有setup挂载阶段beforeMount、mountedonBeforeMount、onMounted更新阶段beforeMount、mountedonBeforeUpdate、onUpdated销毁/卸载阶段beforeDestroy、destroyedonBeforeUnMount、onUnMounted vue3叫卸载阶段更合适对应挂载阶段 四、Vue3生命周期使用
templatediv classVue3-demoh2当前求和为{{ sum }}/h2button clickchangeSumsum1/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
五、Vue2生命周期使用
templatediv{{name}}/div
/template
script
!-- vue2写法 --
export default {data(){return {name:Vue 2 生命周期}},methods:{onChangeName(){this.name 测试生命周期更新}},beforeCreate(){console.log(创建前);},created(){console.log(创建完毕);},beforeMount(){console.log(挂载前);},mounted(){console.log(挂载完毕);},beforeUpdate(){console.log(更新前);},updated(){console.log(更新完毕);},beforeDestroy(){console.log(销毁前);},destoryed(){console.log(销毁完毕);}
}
/script
六、生命周期注意点
如果存在父子组件子组件的mounted生命周期比父组件的mounted生命周期先执行debugger可以使生命周日停止执行比如在beforeMount生命周期写一个debugger后续的生命周期将不会执行生命周期钩子的书写顺序不影响钩子的执行顺序需要避免在更新阶段的两个钩子中进行状态更改因为这可能会导致无限循环的渲染过程。这是因为状态的更改会再次触发组件的更新过程。如果组件中使用了定时器、事件监听或其他订阅为了避免内存泄漏等问题记得在beforeDestory钩子里清除掉相关监听、订阅 ps文中只列举对比了常用的4个阶段vue 2 的8个vue3的7个生命周期钩子vue的全部生命周期不止这几个例如vue3官方文档的生命周期钩子列举了12个vue3生命周期钩子 有需要进一步学习的可以看官方文档本文暂不列举对比
