vue生命周期简记

代码棱镜客
• 阅读 2441

写在前面

如题,vue的生命周期是vue理解的重要一环,弄明白它不只会加深对vue的理解,在实际开发中也会更加得心应手,在此记录写项目开发中体会到的一些经验,只是总结 并不全面,想要详细学习网上关于vue生命周期学习的文章很丰富

<!--more-->

vue生命周期简记

生命周期

  • beforeCreate:创建前,new操作,已绑定事件,还没有数据,不能处理数据
  • created:创建,可以处理数据
  • beforeMounted:挂载前,准备把创建的挂载到el上,有el才去执行挂载
    挂载前的el仍是<div id="app"></div>
  • 有template转化后执行render funcion再去渲染
    cli中的.vue文件中的template是通过vue-loader直接转化直接执行render funcion的减少耗时
  • mounted:挂载,挂载后$el就是渲染后的<div>123</div>,挂载前后中间执行render funcion
  • beforeUpdated:更新前,数据变化
  • updated:更新
  • beforeDestroy:销毁前,组件被销毁,或手动销毁
  • destroy:销毁

注:
挂载前的钩子里获取不到el的,想对如data中的数据进行操作最早要在created里;
一般在createdmounted钩子里写一些页面渲染前的操作,比如数据请求;
有些传统的第三方库在使用后需要在组件销毁时手动删除其创建的对象在destroy

<!--more-->

没有代码
最后附上一张以前看到的一张图
vue生命周期简记

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
郜小超 郜小超
4年前
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题生命周期函数面试题1.什么是vue生命周期2.vue生命周期的作用是什么3.第一次页面加载会触发哪几个钩子4.简述每个周期具体适合哪些场景5.created和mounted的区别6.vue获取数据在哪个周期函数7.请详细说下你对vue生命周期的理解?vue路由面试题1.mvvm框架是什么?2.vuerout
明月 明月
3年前
vue常见面试题
1.有使用过vue吗?说说你对vue的理解?2.说说你对SPA单页面的理解,它的优缺点分别是什么?如何实现SPA应用呢?3.什么是双向绑定?原理是什么?4.请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?5.Vue组件之间的通信方式都有哪些?6.vshow和vif有什么区别?使用场景分别是什
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
CuterCorley CuterCorley
4年前
uni-app入门教程(8)在uni-app中使用Vue
前言本文主要的主要内容是在uniapp中Vue的用法,具体如下:Vue支持响应式数据操作,可以实现数据和事件的绑定,同时支持this传递;uniapp在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期;实现全局变量的3种方式,即公用模块、挂载Vue.prototype和globalData;Class和Style的动态绑定,包括对象
马丁路德 马丁路德
4年前
Vue和微信小程序的区别
_写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。_一、生命周期先贴两张图:vue生命周期小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。onLoad
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这