青岛黄岛区网站开发,php能做手机网站吗,网站建设先进个人总结,郑州网站seo多少钱如下是Vue3的生命周期函数图#xff1a; 一、Vue2生命周期和Vue3声明周期的区别
1. Vue2 中#xff0c;只要创建Vue实例对象而不需要挂载就可以实现beforeCreate 和 created 生命周期函数。 Vue3中必须要将Vue实例对象挂载完成#xff0c;所有的准备工作做完#xff0c;…如下是Vue3的生命周期函数图 一、Vue2生命周期和Vue3声明周期的区别
1. Vue2 中只要创建Vue实例对象而不需要挂载就可以实现beforeCreate 和 created 生命周期函数。 Vue3中必须要将Vue实例对象挂载完成所有的准备工作做完才可以开始实现beforeCreate 和 created 生命周期函数。 2. Vue2 我们销毁组件触发的是beforeDestroy 和 destroyed 函数。 在Vue3中我们销毁组件变为了卸载组件实现的功能是一致的不过只是称呼变了触发的生命周期函数为beforeUnmount 和 unmounted。 二、Vue3生命周期的使用
一以配置项的形式调用
和Vue2中调用生命周期函数的方法一致注意是与setup函数平级。
如下生命周期函数有不懂的可以参考这篇文章
Vue生命周期-CSDN博客
export default {name: MyItem,setup() {},beforeCreate() {console.log(beforeCreate生命周期函数);},created() {console.log(created生命周期函数);},beforeMount() {console.log(beforeMount生命周期函数);},mounted() {console.log(mounted生命周期函数);},beforeUpdate() {console.log(beforeUpdate生命周期函数);},updated() {console.log(update生命周期函数);},beforeUnmount() {console.log(beforeUnmount生命周期函数);},unmounted() {console.log(unmounted生命周期函数);},
}; 二以composition API 形式调用
以上的生命周期函数和composition API 对应形式如下 beforeCreate ---- setup() created ---- setup() beforeMount ---- onBeforeMount mounted ---- onMounted beforeUpdate ---- onBeforeUpdate updated ---- onUpdated beforeUnmount ---- onBeforeUnmount unmounted ---- onUnmounted 使用以上composition API 之前需要先对要使用的API按需引入 import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from vue; 语法格式如下 API (() { // 内部执行内容 }) import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from vue;export default {name: MyItem,setup() {onBeforeMount(() {console.log(beforeMount生命周期函数);})onMounted(() {console.log(mounted生命周期函数);})onBeforeUpdate(() {console.log(beforeUpdate生命周期函数);})onUpdated(() {console.log(update生命周期函数);})onBeforeUnmount(() {console.log(beforeUnmount生命周期函数);})onMounted(() {console.log(unmounted生命周期函数);})}
};
