vuejs的生命周期是什么

vuejs的生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

vuejs的生命周期是什么

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

生命周期先上图

vuejs的生命周期是什么

什么是生命周期

立即学习“前端免费学习笔记(深入)”;

Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。

在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。

再上图,对生命周期图的标注

vuejs的生命周期是什么

vuejs的生命周期是什么

特别值得注意的是created钩子函数和mounted钩子函数的区别

每个钩子函数都在啥时间触发

beforeCreate

在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

相关推荐:《vue.js教程》

以上就是vuejs的生命周期是什么的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3019839.html

(0)
上一篇 2025年3月13日 05:31:19
下一篇 2025年3月13日 05:31:40

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 怎么在idea创建vuejs项目

    创建方法:1、安装Node;2、打开idea,点击“Create New Project”-“Static Web”,填写项目名,点击“Finis”;3、打开idea的Terminal,执行指令来安装vue脚手架工具、初始化vue项目即可。…

    2025年3月13日 编程技术
    200
  • vuejs怎么实现全局状态管理

    在vuejs中可以利用vuex实现全局状态管理;Vuex是一个专为Vue.js应用程序开发的状态管理模式,可以用来管理全局数据,可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。 本教程操作环境:windows7系统…

    2025年3月13日
    200
  • vuejs有哪些使用场景

    vuejs的使用场景:1、单页面应用程序;2、移动端开发,可以结合i-view、Element UI等一些成熟的前端UI库一起开发;3、维护较少,组件复用要求不高的项目;4、具有复杂交互逻辑的前端应用等。 本教程操作环境:windows7系…

    2025年3月13日
    200
  • vuejs算什么

    vuejs是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用;Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。 本文操作环境:Windows7系统、vue2.5.17…

    2025年3月13日
    200
  • 怎么下载vuejs框架

    下载vuejs框架的方法:1、打开vuejs官网;2、在打开的网页上,找到并点击“GITHUB”按钮;3、根据需求选择下载脚本的版本;4、下载VEU脚本框架即可。 本文操作环境:windows7系统、Vue2.9.6版,DELL G3电脑。…

    2025年3月13日 编程技术
    200
  • vuejs怎么删除cookie

    vuejs删除cookie的方法:1、通过getCookie读取cookie;2、通过setCookie设置cookie;3、通过“delCookie (name) {…}”删除cookie即可。 本文操作环境:windows7…

    2025年3月13日
    200
  • vue路由传值的几种方式是什么

    vue路由传值的方式:1、利用“router-link”路由导航来传递;2、调用“$router.push”实现路由传参数值;3、通过路由属性中的name匹配路由,再根据params传递参数值;4、通过query来传递参数值。 本教程操作环…

    2025年3月13日
    200
  • vuejs开发如何启动项目

    vuejs启动项目的方法:1、安装node.js;2、安装“@vue/cli”;3、使用“vue create 项目名称”命令创建一个项目;4、使用cd命令进入vue项目目录中;5、执行“npm run serve”命令启动项目。 本教程操…

    2025年3月13日 编程技术
    200
  • 手把手教你使用Vue2代码改成Vue3(图文详解)

    之前的文章《一招教你使用vscode中插件搞定整个项目的代码替换(收藏)》中,给大家介绍了怎么使用vscode中插件搞定整个项目的代码替换。下面本篇文章给大家介绍怎么使用Vue2代码改成Vue3,伙伴们过来看看吧。 Vue3已经出来有一段时…

    2025年3月13日 编程技术
    200
  • vuejs怎么取消冒泡

    vuejs取消冒泡的方法:1、打开相应的vue文件;2、通过“…”方式取消事件冒泡。 本文操作环境:windows7系统、vue2.5.17版、DELL G3电脑。 vuejs怎么取消冒泡? vue.js阻止事件冒泡和默认事件 …

    2025年3月13日
    200

发表回复

登录后才能评论