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

时间：2024-08-22 16:06:42浏览次数：4

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.基本用法<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.使用 ......

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

相关文章

赞助商

阅读排行