vue生命周期2.0与 3.0

已于 2022-04-16 14:53:30 修改
阅读量562 收藏
点赞数
分类专栏： vue知识点 文章标签： vue
于 2022-04-16 14:50:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36582776/article/details/124213485
版权

beforeCreate：用于初始化事件以及生命周期

created：初始化data和method

beforeMount：编译结束，用于判断是否有el,template

mounted：把VUE实例生成的虚拟的DOM转成真实的DOM，放在了页面中，这就是挂载；可以操作Dom了

Vue3.0也提供了Composition API形式的生命周期钩子，与Vue2.x中钩子对应关系如下:

beforeCreate ===>setup()
created =======>setup()
beforeMount ===> onBeforeMount
mounted=======> onMounted
beforeUpdate ===> onBeforeUpdate
updated =======> onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted=====> onUnmounted

七彩冰淇淋与藕汤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 3 setup 函数
人生代码 ---- 公众号
11-12 2917
setupsetup 函数可以说是 Vue 3 一个入口函数。参数使用 setup 函数时，它将接受两个参数：propscontext让我们更深入地研究如何使用每个参数。Propsset...
Vue2.0与Vue3.0生命周期对比
zf118的博客
11-03 1473
2.0生命周期 3.0生命周期 beforeCreate(组件创建之前) setup(组件创建之前) created(组件创建完成) setup(组件创建完成) beforeMount(组件挂载之前) onBeforeMount(组件挂载之前) mounted(组件挂载完成) onMounted(组件挂载完成) beforeUpdate(数据更新，虚拟DOM打补丁之前) onBeforeUpdate(数据更新，虚拟DOM打补丁之前) updated(数据更新，虚拟DOM渲...
vue2.0和vue3.0生命周期对比
weixin_44759289的博客
08-05 334
通过下表，我们可以看到，原有的生命周期基本都是存在的，并且新的命名更加至关，通过on前缀可以直观的看到，这是一个生命周期函数 vue2.0生命周期 vue3.0生命周期 beforeCreate（组件创建之前） setup（组件创建之前） created（组件创建完成） setup（组件创建之前） beforeMount（组件挂载之前） onBeforeMount（组件挂载之前） mounted（组件挂载完成） onMounted（组件挂载完成） beforeUpdate（数
vue3.0和vue2.0生命周期的理解？
weixin_66557048的博客
03-16 219
Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。
vue 3.0和2.0区别_通过Vue2.0源码理解vue生命周期
weixin_39621427的博客
12-12 243
在vue2.0中，我们经常会看到下面这张生命周期图，本次结合源码来让大家对这张生命周期图有一个简要的了解。1.beforeCreate和created：src/core/instance文件夹为vue方法初始化的主文件夹，入口为index.js文件。在使用vue框架的时候，我们首先要通过new Vue初始化一个vue实例：此时是通过Vue方...
vue2.0和vue3.0生命周期函数对比？
weixin_47450807的博客
03-18 965
一、写在前面 今天总结一下，vue2.0和vue3.0的生命周期函数。 二、对比 options api setup api beforeCreate not needed created not needed beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeUnmount onBeforeUnmount unmounte
vue-cli2.0转3.0之项目搭建的详细步骤
10-17
主要介绍了vue-cli2.0转3.0之项目搭建的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUE官方文档最新离线文档(2.0和3.0)
11-02
VUE官方文档(2.0和3.0)，不需要安装任何HTTP_SERVER，WINDOWS/LINUX下都可以使用，不好用或者资源是假的，留言骂我，不要客气。
Vue2021通杀2.0-3.0秘诀.pdf
12-08
Vue2021通杀2.0-3.0秘诀.pdf
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
vue2和vue3生命周期对比
麦七的博客
03-06 1115
图示（Vue2为例）： 对比： vue2 Description vue3 Description beforeCreate 组件实例刚被创建，组件属性计算之前，如data属性等 setup 开始创建组件之前，在 beforeCreate 和 created 之前执行。创建的是 data 和 method created 组件实例刚被创建，属性已绑定，但DOM还没生成，*$el*属性还
vue声明周期详解
weixin_33924770的博客
03-12 162
最近参加了几场面试，每个面试官都会问到一个问题，那就是关于Vue的生命周期，我想绝大部分面试者都会说，beforeCreated, created......等这样的回答，我想绝大部分的面试官都不会满意的。那怎么样才是让面试官满意的答案呢？我想最满意的答案应该是这样的！当然，你不能把这张图片抛给面试官。那么你只能详细的介绍每个环节了。当我们创建一个Vue实例，也就是 new Vue()的时候，首先...
最新 Vue 生命周期 V2.0 VS V3.0 对比总结
猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！
07-02 2541
V2: 代码演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue系列</title> </head> <body> <div id="app"> <h1 id="h1">{{msg}}</h1> <input type="text" v.
Vue3.0实现todolist之常用的生命周期onMounted
祈澈菇凉
09-28 4246
生命周期：一个组件从创建到销毁的过程 1：setup 不需要引入的生命周期：setup 代表组件创建的过程 可以直接在里面使用 2：onMounted import{ defineComponent, ref, onMounted } from "vue"; onMounted组件挂载的生命周期 比setup晚一些，是一个函数，里面传入回调函数 onMounted(() =>{ //组件挂...
vue2、vue3生命周期详解以及对比
夜空孤狼啸的博客
07-31 1849
div class="child">child组件--{{num}}下面借用官网的一张图介绍vue3 的生命周期，应该会更加详细把。销毁 ---- 在元素被销毁之前立即执行。更新 ---- 当响应数据被修改时执行。挂载 ---- DOM被挂载时执行。创建 ---- 在组建创建时执行。eg:可以运行一下查看执行顺序。'app组件创建前''app组件创建后''app组件挂载前''app组件挂载后''app组件更新前''app组件更新后''app组件销毁前''app组件销毁后'
vue2生命周期和vue3生命周期的区别
qq252750818的博客
05-12 6168
vue2常用生命周期： 创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数 创建后：Created() 是最早使用data和methods中数据的钩子函数 挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树 挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步 更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的 更新后：Updated() 内存和页面都是新的 销毁前：bef
Vue3.0和2.0语法不同分析
最新发布
weixin_44384273的博客
11-16 344
vue3.0新的写法
vue2和vue3的生命周期区别,vue生命周期有几个阶段
纸尿裤排行
09-09 1712
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用。挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置：编译模板，把data里面的数据和模板生成html，完成了el和data初始化，注意此时还没有挂在html到页面上。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。
vue3.0 生命周期函数
热门推荐
weixin_43294560的博客
07-25 1万+
从'vue'中引入的生命周期函数,这些生命周期钩子注册函数只能在 setup() 期间同步使用， 因为它们依赖于内部的全局状态来定位当前组件实例（正在调用 setup() 的组件实例）, 不在当前组件下调用这些函数会抛出一个错误。 使用 import { onMounted } from 'vue' setup() { onMounted(()=>{ ... }) 新增两个生命周期函数 onRenderTracked((e)=>{ 当一个 r
尚硅谷vue2.0 vue3.0笔记
10-19
而Vue3.0的笔记则包括Vue3.0的响应式、Composition API、新的生命周期钩子、自定义hook函数等内容。此外，他们还提供了使用vue-cli和vite创建Vue项目的教程。如果你想深入学习Vue框架，可以考虑参考尚硅谷的Vue2.0和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值