浅谈vue的生命周期

 更新时间:2022年01月07日 15:15:03   作者:爱吃辣的玉兔  
这篇文章主要为大家介绍了vue的生命周期,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

1.什么是生命周期?有什么作用?

每一个vue实例在创建时都要经历一系列的初始化过程-----例如需要设置监听,编译模板,将实例挂载到dom并在数据发生变化时更新dom等等.同时这个时候也会运行一些生命周期钩子的函数,这些函数,给用户在不同阶段添加代码的机会.例如:如果需要某些插件操作dom节点,如果想在页面渲染之后弹出广告,那我们们最早可以再mounted中进行.

2.第一次加载页面会触发哪几个钩子?

beforeCreate created beforeMount mounted

3.简述每个周期应用于哪个场景?

beforeCreate:在new一个实例后,只有一些默认的生命钩子和默认事件,其他的东西还没有创建,在beforeCreate生命周期执行时,data和methods中的数据还没有初始化,不能在这个阶段使用data中的数据和methods的方法.

created:data和methods中的数据都已经初始化好了,如果调用methods中的方法和操作data中的数据最早在这个阶段进行.

beforeMount:执行这个钩子事,内存中已经编译好了模板,但是还没有挂载到页面中,此时的页面还是旧的

mounted:执行到这个钩子时,说明vue实例已经初始化完成,此时组件脱离了创建阶段进入到了运行阶段,如果需要某些插件操作dom节点,那我们们最早可以再mounted中进行

beforeUpdate:当执行这个钩子时,页面还是旧的,data中的数据是更新后的,但是页面的数据和data中的数据还没有同步.

updated:页面和data中的数据保持同步,页面是新的了.

beforeDestory:vue实例开始从运行阶段进入销毁阶段,这时,data和methods,指令,过滤器.......都是可用的,还没有真正销毁.

destoryed:这时,data和methods,指令,过滤器.......都是不可用的,组件已经被销毁了.

4.created和mounted的区别

created在模板渲染成html前调用,即通常初始化某些属性值,然后在渲染成视图.

mounted在模板渲染成html后调用,通常是页面初始化之后,再对dom节点进行操作时.

5.vue在哪个生命周期获取数据?

一般created/beforeMount/mounted都可以

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/m0_61373353/article/details/122328631

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • vue webpack打包原理解析(全网最新最全)

    vue webpack打包原理解析(全网最新最全)

    webpack是让我们可以进行模块化开发,并且会帮助我们处理模块间的依赖关系,这篇文章主要介绍了vue webpack打包原理,本篇介绍的有点长,希望大家耐心阅读
    2023-02-02
  • 使用vuetify实现全局v-alert消息通知的方法

    使用vuetify实现全局v-alert消息通知的方法

    使用强大的Vuetify开发前端页面,结果发现官方没有提供简便的全局消息通知组件,所以自己动手写了一个简单的组件,接下来通过本文给大家介绍使用vuetify实现全局v-alert消息通知的详细代码,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • Vue 加载远程组件的解决方案

    Vue 加载远程组件的解决方案

    最近的项目有一个加载远程组件的需求,基于此我对 Vue 加载远程组件的方案进行了研究,并且整理了两个可行的解决方案,有感兴趣的小伙伴跟着小编一起来看看吧
    2023-07-07
  • vue项目实现按钮可随意移动

    vue项目实现按钮可随意移动

    这篇文章主要为大家详细介绍了vue项目实现按钮可随意移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue中get方法\post方法如何传递数组参数详解

    vue中get方法\post方法如何传递数组参数详解

    在前后端交互的时候,有时候需要通过get或者delete传递一个数组给后台,下面下面这篇文章主要给大家介绍了关于vue中get方法\post方法如何传递数组参数,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue搭建本地JSON静态数据服务器全过程

    vue搭建本地JSON静态数据服务器全过程

    这篇文章主要介绍了vue搭建本地JSON静态数据服务器全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 关于vue3.0中的this.$router.replace({ path: ''/''})刷新无效果问题

    关于vue3.0中的this.$router.replace({ path: ''/''})刷新无效果问题

    这篇文章主要介绍了关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • vue mvvm数据响应实现

    vue mvvm数据响应实现

    这篇文章主要介绍了vue mvvm数据响应实现的方法,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-11-11
  • vue粘贴复制功能的实现过程记录

    vue粘贴复制功能的实现过程记录

    最近在项目中遇到点击按钮复制链接功能,所以这篇文章主要给大家介绍了关于vue粘贴复制功能的实现过程,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • element table数据量太大导致网页卡死崩溃的解决办法

    element table数据量太大导致网页卡死崩溃的解决办法

    当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,下面这篇文章主要给大家介绍了关于element table数据量太大导致网页卡死崩溃的解决办法,需要的朋友可以参考下
    2023-02-02

最新评论