【Vue】关于Vue3的生命周期

本文主要是介绍【Vue】关于Vue3的生命周期，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue3中新增了一个setup生命周期函数：(1) setup执行的时机是在beforeCreate生命周期函数之前执行，在setup函数中是不能通过this来获取实例的；(2) 为了命名的统一性，将beforeDestroy 改名为 beforeUnmount，destroyed 改名为 unmounted

生命周期函数：

setup —— 不能通过this来获取实例
beforeCreate —— 建议使用setup来代替
created —— 建议使用setup来代替
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted

新增加的生命周期函数（在setup中使用）可以在函数前加 on 来访问组件的生命周期

<script>import {onBeforeMount,onMounted,onBeforeUnmount,onUnmounted} from 'vue'export default {name:"AboutView",//生命周期钩子（新语法）setup(){console.log("setup------------------1");onBeforeMount(()=>{console.log("---onBeforeMount---")});onMounted(()=>{console.log("---onMounted---")});onBeforeUnmount(()=>{console.log("---onBeforeUnmount---")});onUnmounted(()=>{console.log("---onUnmounted---")})},//外面这些生命周期，旧语法虽然vue3也支持，感觉可以不用写了；只需要把setup中的钩子给它挂进去就已经够用了beforeCreate() {console.log("beforeCreate-----------------2")},created() {console.log("created-----------------3")},beforeMount() {console.log("beforeMount-----------------4")},mounted() {console.log("mounted-----------------5")},beforeUnmount() {console.log("beforeUnmount-----------------6")},unmounted() {console.log("unmounted-----------------7")},}

这篇关于【Vue】关于Vue3的生命周期的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---