目录
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")
},
}