vue的生命周期

最新推荐文章于 2023-01-30 08:16:36 发布
原创 最新推荐文章于 2023-01-30 08:16:36 发布 · 207 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细探讨了Vue组件的生命周期，包括beforeCreate、created、beforeMount、mounted等关键阶段。在初始化阶段，组件实例化并进行配置，created钩子中数据已挂载但DOM未渲染。beforeMount和mounted分别标志着DOM即将渲染和已完成渲染。在运行时，数据变化会触发beforeUpdate和updated钩子，用于更新DOM。当组件销毁时，会执行beforeDestroy和destroyed钩子，适合做善后处理。

什么是生命周期

组件从创建到销毁的一系列过程叫做组件的生命周期。

vue的生命周期函数

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. activated
  8. deactivated
  9. beforeDestroy
  10. destroyed

vue实例的生命周期

从开始创建、初始化数据、编译模板、挂载dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
vue的生命周期总分为3个阶段：初始化、运行中、销毁

过程

初始化阶段

  1. 一个组件或者实例的生命周期都是通过new开始的
  2. 实例化之后，内部会做一些初始化事件与生命周期相关的配置
    在这里插入图片描述
  3. 这个钩子函数初始化的时候立即执行，此钩子函数里面是获取不到数据的，同时页面中的真是dom节点也没有挂载出来
    在这里插入图片描述
  4. created钩子函数内部的数据已经被挂载了，但是真实dom节点还是没有渲染出来，在这个钩子函数里面，如果同步的去更改数据的话，运行中钩子函数是不会执行的。通常会在此钩子函数里面进行ajax的异步操作，另外还可以做一些初始化时间的绑定。
    在这里插入图片描述
  5. 接下来的过程，就是组件或者实例去查找各自的模板，然后将其编译成虚拟dom，放入render函数中做初始化渲染的操作。
  6. beforeMount代表dom马上就要被渲染出来了，但是还没有真正的在页面中渲染出来，此钩子函数与created钩子函数基本一致，可以做ajax与初始化事件的绑定操作
    在这里插入图片描述
    生成好了虚拟dom，然后在render函数里面替换对应的el，渲染成真实dom节点，相当于在render函数里面做了一个初始化渲染的操作
  7. mounted钩子函数是初始化阶段的最后一个钩子函数，数据已经挂载完毕了，真实的dom也已经渲染出来了，这个钩子函数可以来做一些实例化的相关操作==>拖拽
    在这里插入图片描述
  8. 运行时钩子函数初始化阶段是不会主动执行的，只有dom挂载完毕了，然后再去当数据发生变化的时候，beforeUpdate这个钩子函数才会执行
    在这里插入图片描述
  9. 这个钩子函数里面dom获取的数据内容是更新后的内容，生成虚拟dom，与上一次的虚拟dom结构进行对比，比较出来差异（diff算法），再去进行真实dom的重新渲染操作，这里的updated中的真是dom里面显示的数据就是跟你在内存里面的data里的数据趋于一致了。
    在这里插入图片描述
  10. 当组件销毁的时候，就会触发执行 vm.$destroy()的时候组件就会销毁 ，这个钩子函数代表销毁之前，可以做一些善后操作，例如我们可以做一些清楚一些事件绑定，清楚定时器相关操作
    在这里插入图片描述
Fl_ying_boy
关注
APICloud快速入门
~~~的博客
11-18 2019
1、APICloud定义 APICloud，使用Web技术制作APP平台，是“云端一体”的移动应用云服务提供商，通过端API和云API来简化移动应用开发技术，可帮开发者快速实现移动应用的开发、测试、发布、应用等全生命周期管理。 互联网+应用开发服务=APICloud 延申 APICloud测试：一键真机测试或WIFI真机同步 APICloud应用开发模式：标准HTML/CSS/JS+APIClou...
APICloud学习过程留下的计划
小火龙的博客
09-14 453
    APICloud用起来很方便，不过为了赶出一个app，一把抓瞎，想把这个技术好好学学，现在这里留下学习过程中想写下来的内容。 网页中控件等的布局使用方法（前端菜的一逼） 使用js写几个常用的算法： 连接数据库 页面跳转 传递json的多个值 使用循环实现多个div的显示 数据保存到手机中的文件 文件的读取与字符串的操作 Apploader真机调试的过程详细记...
APICloud 的一些常用方法
love_pgme的博客
10-11 8170
工作要求用APICloud混合开发APP，了解过后发现这中开发方式十分强大，于是从网上开始了学习
APIcloud平台开发第一天笔记
一个还在路上的人……
07-22 1129
APIcloud开发培训第一天 1.APIcloud开发平台介绍 1.1使用api 核心模块在 window.api 对象下，不需要单独引用，可以直接调用 api.methodName(param, callback); 扩展模块需要 require 引入，遵守 CommonJS 规范 var module = api.require('moduleName'); modu...
2018/01/12 APICloud 基础知识
wh754707759的博客
01-12 854
通过今天看的视频，使我明白了一些 APICloud 基础知识！ APICloud 应用设计思想 Client/Cloud 架构设计：完整的前后端分离，在移动端实现界面和功能，在服务端提供数据和服务。 APICloud界面布局五大组件 Widget：Widget 是 APICloud 应用运行管理的最小单位，每个 APICloud 应用至少包含一个 Widget，每个 Widget
【Vue 学习】- VueJS 生命周期
ONESTARの博客
12-27 1485
一、概述 Vue 的生命周期可以分为 8 个生命周期的执行点，从 new 创建 Vue 对象到对象的销毁，其中 4 个基本的，4 个特殊的，在下图中，红色标注的就是 8 个生命周期的执行点，前四个为基本的，后四个为特殊的 四个基本执行点（数据加载）： beforeCreadted： 实例组件刚创建，元素DOM和数据都还没有初始化，loading事件 created： 数据dat...
vuejs页面跳转_【Vue 学习】 VueJS 生命周期
weixin_39649405的博客
01-26 257
一、概述Vue 的生命周期可以分为 8 个生命周期的执行点，从 new 创建 Vue 对象到对象的销毁，其中 4 个基本的，4 个特殊的，在下图中，红色标注的就是 8 个生命周期的执行点，前四个为基本的，后四个为特殊的四个基本执行点(数据加载)：beforeCreadted：实例组件刚创建，元素DOM和数据都还没有初始化，loading事件created：数据data已经初始化完成，方法...
vuejs （2）- Vue 生命周期 和 VueJS ajax
一角残叶的博客
07-16 494
1 Vue 生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 8 个生命周期的执行点 4个基本的 4个特殊的 2 VueJS ajax 2.1 vue-resource vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios， 2.2 axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览
VueJS生命周期
逍遥云恋
12-20 639
每个 Vue 实例在被创建之前都要经过一系列的初始化过程. vue在生命周期中有这些状态: before Create, created, before Mount, mounted, before Update, updated, before Destroy, destroyed。 Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子...
【VueJS】Vue的生命周期（钩子函数）
'Ablaze 的专栏
01-04 7152
环境：Vue2.x版本在Vue的官网有一张图已经很好的诠释了生命周期，我在这里就不再多讲了，直接贴图，然后上程序代码。<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><div id="app"> {{count}} <p><button @click="add">加分</button></p> <
vuejs 2.x 从源码看生命周期；vue源码
HeMister的博客
01-30 446
vue2的源码；vue2生命周期
【VUE】vuejs2.0 vue实例的生命周期
tanpenggood
02-18 424
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。 例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。 下图展示的就是一个vue实例对象的生命周期。 从图上我们可以看到vue在生命周期中有这些状态， beforeCreate,created,beforeMount,mounted,beforeUpdate,updat...
vuejs vue实例的生命周期
Xweihaifeng@outlook.com的博客
04-04 259
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。下图展示的就是一个vue实例对象的生命周期。            从图上我们可以看到vue在生命周期中有这些状态，beforeCreate,created,beforeMount,mounted,beforeUpdat...
vue系列教程-03vuejs的结构和生命周期
qq_41689712的博客
06-23 194
vuejs的结构和生命周期 本内容为系列内容，全部内容请看我的vue教程分类 我的个人博客 本节仓库地址 视频教程地址 结构 上一节我们实例化vue的时候传递了一个对象，那么这个对象具体是个什么样的结构那，可以传递一些什么样的值那 <script> // 实例化一个vue let vm = new Vue({ // 页面中的挂载点 el: '#app', // 定义内部数据 data: { }
vuejs学习笔记 vue生命周期 初始化
dizzydwarf的博客
12-07 582
目录Vue生命周期初始化阶段模板编译阶段挂载阶段卸载阶段new vue()被调用时发生了什么_init()callHook函数内部原理 Vue生命周期 分为四个阶段 初始化阶段，模板编译阶段，挂载阶段，卸载阶段 初始化阶段 new create() -> created之间 初始化属性，事件及响应式数据 props,methods,data,computed,watch,provide,inject 模板编译阶段 created -> beforeMount之间 只在完整版里有，将模板编译成渲染
vuejs2.0 vue实例的生命周期
ylhsuper的博客
12-24 363
转自：https://www.cnblogs.com/caizhenbo/p/6418291.html vuejs2.0 vue实例的生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。下图展示的就是一个vue实例对象的生命周期。  
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值