IT辅导娱乐网| 蜘蛛地图| 所有文章|
Vue的生命周期及钩子函数介绍 - IT辅导
  • 首页
  • IT技术 IT辅导资源网设计图
    • DVWA靶场
    • sqli-lab靶场
  • 源码基地
  • 软件分享 IT辅导资源网设计图
    • 辅助软件
  • emlog教程
  • 白嫖活动
  • 网络技巧 IT辅导资源网设计图
    • seo教程
  • 编程教程
  • 值得看一看 IT辅导资源网设计图
    • 值得听一听
    • 读懂世界
    • 活动线报
  • 更多功能 IT辅导资源网设计图
    • 在线投稿
    • 公告动态
    • 广告合作
    • 匿名投稿


登录后,享受更多优质服务哦
IT辅导资源网站长qq头像
欢迎回来,可爱的会员!个人中心退出登录
导航菜单
  • 首页
  • IT技术
    • DVWA靶场
    • sqli-lab靶场
  • 源码基地
  • 软件分享
    • 辅助软件
  • emlog教程
  • 白嫖活动
  • 网络技巧
    • seo教程
  • 编程教程
  • 值得看一看
    • 值得听一听
    • 读懂世界
    • 活动线报
  • 更多功能
    • 在线投稿
    • 公告动态
    • 广告合作
    • 匿名投稿

Vue的生命周期及钩子函数介绍

2020/9/23 五年级扛把子 

前言

Vue的生命周期通俗来讲就是我们用Vue写的网页在浏览器运行起来之后,我们写的代码要在内存里执行。例如我们都会写的var vm = new Vue();,就是new出来了一个Vue 实例。这个实例从创建一直到我们关掉浏览器这个实例消亡,这一段时间里,Vue这个框架干了啥,Vue的实例做了啥,先做啥,后做啥,这一系列事情的关系是怎样的,这就是Vue的生命周期。

vue生命周期共分为四个阶段  

实例创建  DOM渲染  数据更新  销毁实例  


钩子函数介绍

1.beforeCreate --创建前
vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。

2.created --创建后
vue实例的数据对象data有了,$el还没有

3.beforeMount --渲染前
vue实例的$el和data都初始化了,但还是虚拟的dom节点,具体的data.filter还未替换

4.mounted --渲染后
vue实例挂载完成,data.filter成功渲染

5.beforeUpdate --更新前
data更新时触发

6.updated —更新后
data更新时触发

7.beforeDestroy —销毁前
组件销毁时触发

8.destroyed —销毁后
组件销毁时触发,vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在


执行顺序和什么时候执行,看下图。  


 点赞:0  打赏  分享  海报

  • 打赏支付宝扫一扫
  • 打赏微信扫一扫
  • 打赏企鹅扫一扫
结束语
温馨提醒:如有技术问题以及资源失效请联系站长 QQ89549822 进行反馈!!!
 您阅读本文耗时: 0小时02分35秒
热度:308° 发布时间:2020年9月23日

推荐:

标题:Vue的生命周期及钩子函数介绍

链接: https://www.itfd.cn/post-1351.html

版权:转载请注明来源于【IT辅导娱乐网】为原创

上一篇: 想知道新手学电脑怎么能够快速入门吗it辅导

下一篇: 想买电脑不知道怎么选的就看这里it辅导

作者头像 作者名称 作者性别
五年级扛把子
联系作者 作者主页

热门推荐

1 Android开发环境搭建
2 IDEA通过maven构建JavaWeb项目步骤详解
3 Java jdk下载与安装,超级详细
4 MySQL事务隔离级别
5 头号玩家美版中字超清资源来了
6 4男子买400部手机养抖音号被抓

评论列表

取消回复

  • 存档

    • 2020年9月(191)
    • 2020年8月(92)
    • 2020年7月(5)
    • 2020年6月(224)
    • 2020年5月(392)
    • 2020年4月(267)
    • 2020年3月(76)
    • 2019年3月(1)
    • 1970年1月(29)
  • 搜索

  • 热门文章

    • 神佑之路手游源码-附视频教程
    • 最新可用老王VPN2.22.15谷歌市场版,免费使用
    • 私藏的十个网站,不看后悔系列
    • 虚拟商品自动发货商城源码
    • 不吃苦、不奋斗,你要青春做什么?
  • 随机文章

      • idea(全称IntelliJ IDEA)安装和下载教程及破解版安装
        • nginx入门菜鸟教程
          • java Throwable之异常
            • spring IOC和AOP概述
              • idea插件安装详解
    提示信息

    SQL语句执行错误: SELECT COUNT(*) AS total FROM emlog_twitter
    Table 'itfd.emlog_twitter' doesn't exist

    «点击返回