首页 > 其他分享 >vue生命周期

vue生命周期

时间:2023-08-20 17:00:16浏览次数:26  
标签:生命周期 销毁 实例 dom vue 挂载 data

Vue 的生命周期总共分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。

1、beforeCreate(创建前)

表示实例完全被创建出来之前,vue 实例的挂载元素$el和数据对象 data 都为 undefined,还未初始化。

2、created(创建后)

数据对象 data 已存在,可以调用 methods 中的方法,操作 data 中的数据,但 dom 未生成,$el 未存在 。

3、beforeMount(挂载前)

vue 实例的 $el 和 data 都已初始化,挂载之前为虚拟的 dom节点,模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中。data.message 未替换。

4、mounted(挂载后)

vue 实例挂载完成,data.message 成功渲染。内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,DOM 渲染在 mounted 中就已经完成了。

5、beforeUpdate(更新前)

当 data 变化时,会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。

6、updated(更新后)

当 data 变化时,会触发 updated 方法。页面和 data 数据已经保持同步了。

7、beforeDestory(销毁前)

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

8、destoryed(销毁后)

组件销毁之后调用,对 data 的改变不会再触发周期函数,vue 实例已解除事件监听和 dom绑定,但 dom 结构依然存在。

标签:生命周期,销毁,实例,dom,vue,挂载,data
From: https://www.cnblogs.com/qiuchuanji/p/17644255.html

相关文章

  • Vuex有哪几种属性?
    有五种,分别是State、Getter、Mutations、Actions、Modulesstate=>基本数据(数据源存放地)getters=>从基本数据派生出来的数据mutations=>提交更改数据的方法,是同步操作actions=> 用于异步操作和提交mutations,在actions中可以进行任何异步操作,最后再提交到mutations中......
  • Vue-Router 的懒加载如何实现
    非懒加载:importListfrom'@/components/list.vue'constrouter=newVueRouter({routes:[{path:'/list',component:List}]}) 懒加载:1.使用箭头函数+import动态加载constList=()=>import('@/components/list.vue')constroute......
  • Vue CLI脚手架
    1、node_modules依赖包①我们通过项目终端输入npmi,就会生成该依赖包,依赖包会自动根据package.json文件中所有需要的东西进行封装下载,例如:jquery,vue2等等②该依赖包因为承载项目的所有内容,在项目大的时候其所占内存也会很大。③在项目传发时,依赖包是可以删除的,他人只需要输入npmi,......
  • Vue基础语法
    一、插槽1、格式放在子组件<slot>内容</slot>2、内容可以放任何模块的代码3、原理父组件引用时,填写内容会被应用到插槽css模块<style>.box{width:200px;height:200px;background-color:aqua;float:left;margin-right:20px;......
  • vuepress 安装报错问题
    关于vuepress部署出现样式的问题及解决6月前作者:我yi癫狂分类: 博客文章阅读(35)原文违法举报 目录vuepress部署出现样式问题vuepress个人博客部署遇到的一些问题1、js和css出现404问题2、每次都要重复操作打包、运行、上传github很麻烦怎么办?3、github.io无法打开怎......
  • vue-
    插槽slots 传html结构,父传子slot父组件子组件渲染作用域插槽内容可以访问到父组件的数据作用域,因为插槽内容本身是在父组件模板中定义的。具名插槽  插槽:子组件传给父组件数据,父组件传回子组件父子组件生命周期生命周期函数创建期:beforeCreate  create......
  • 前端vue自定义柱形图 选中更改柱形图颜色及文字标注颜色
    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率......
  • 前端Vue自定义等分底部菜单导航按钮 自适应文字宽度 可更改组件位置
    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率......
  • vue.js:5108 [Vue warn]: Cannot find element: #body_container
    1、原因:我把Vue挂载元素的JS放在了html加载完成的前面了2、解决:放到html加载完成之后就可以了 ......
  • Vue技术
    ......