首页 > 其他分享 >vue2和vue3生命周期钩子函数对比图

vue2和vue3生命周期钩子函数对比图

时间:2024-08-22 16:06:42浏览次数:10  
标签:DOM 钩子 setup Keep vue2 vue3 运行

vue2 -> vue3

触发条件

beforeCreate -> 使用 setup()

创建时运行

created -> 使用 setup()

创建时运行

beforeMount -> onBeforeMount

挂载DOM运行

mounted -> onMounted

挂载DOM运行

beforeUpdate -> onBeforeUpdate

响应数据修改时运行

updated -> onUpdated

响应数据修改时运行

beforeDestroy -> onBeforeUnmount

元素销毁前运行

destroyed -> onUnmounted

元素销毁前运行

activated -> onActivated

管理Keep-Alive组件

deactivated -> onDeactivated

管理Keep-Alive组件

errorCaptured -> one rrorCaptured

 


标签:DOM,钩子,setup,Keep,vue2,vue3,运行
From: https://www.cnblogs.com/Zzbj/p/18374081

相关文章

  • 详细讲述 Vue3 的 <script setup>
    <scriptsetup>是Vue3引入的一种新的 <script> 标记的用法,其本质是一个语法糖。它极大简化了单文件组件(SFC)的开发体验,目的是让代码更简洁、易读,同时减少模板和逻辑之间的重复。1.基本用法<!--使用<scriptsetup>--><template><div><p>message:{{message......
  • 044、Vue3+TypeScript基础,pinia库中getters的用法
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步:引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步:创建pinia实例constpinia=......
  • vue3解决跨域问题
     vue3登录提示错误 解决方法1,修改根目录下vite.config.ts文件 修改host、proxy、target,修改后文件如下(红色为修改),具体内容根据后台实际修改 server:{ host:'localhost', port:env.VITE_PORTasunknownasnumber, open:JSON.parse(env.VITE_OPEN),......
  • 043、Vue3+TypeScript基础,pinia库使用action,在函数中对存储数据进行修改
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步:引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步:创建pinia实例constpinia=......
  • [vue3] vue3更新组件流程与diff算法
    在Vue3中,组件的更新通过patch函数进行处理。patch函数源码位置:core/packages/runtime-core/src/renderer.tsatmain·vuejs/core(github.com)constpatch:PatchFn=(n1,n2,container,anchor=null,parentComponent=null,parentSuspen......
  • 042、Vue3+TypeScript基础,pinia库存储数据修改的两种方式
    01、main.ts代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步:引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步:创建pinia实例constpinia=......
  • 041、Vue3+TypeScript基础,使用pinia库来储存数据
    01、输入npminstallpinia 02、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步:引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步......
  • 040、Vue3+TypeScript基础,使用nanoid库生成id
    01、使用powershell,输入npminanoid来安装: 02、App.vue代码如下:<template><divclass="app"><h2class="title">App.Vue</h2><Page1/><br><Page2/></div></template><......
  • vue3-基础
    一、创建vue3项目npminitvue@latest二、语法介绍 1.<scriptsetup>语法糖<scriptsetup>constaa='123'constclickFn=()=>{ console.log(123);}</script><template> <div>{{aa}}</div> <button@click=&quo......
  • VUE3 + Pinia
     一、状态管理库Pinia 1.介绍介绍Pinia是vue的状态管理库,是Vuex状态管理库的替代​优势1.提供更加简单的API(去掉了mutation)2.提供符合组合式风格的API3.去掉了modules的概念,每个store都是一个独立的模块4.搭配TypeScript一起使用提供可靠的类型推断 2.使用 ......