Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文,因此this与你期待的Vue实例不同。

1、beforeCreate

  在实例初始化之后,数据观测和event/watcher时间配置之前被调用。

2、created

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

3、beforeMount

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

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

4、mounted

  el被新创建的vm.$el替换,并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内。

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

5、beforeUpdate

  数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。

  你可以在这个钩子中进一步第更改状态,这不会触发附加的重渲染过程。

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

6、updated

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

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

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

7、activated

  keep-alive组件激活时调用。

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

8、deactivated

  keep-alive组件停用时调用。

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

9、beforeDestroy 【类似于React生命周期的componentWillUnmount】

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

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

10、destroyed

  Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

  该钩子在服务端渲染不会被调用。

 

 

 

 

 

摘抄详细的VUE生命周期的更多相关文章

  1. Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)

    文章目录 1.Vue生命周期 1.1 概念 1.2 图解 2.钩子函数的用法说明 2.1 beforeCreate()和created()的详细讲述 2.1.1 方法说明 2.1.2 代码实例 2.1 ...

  2. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

  3. vue 生命周期的详解

    一.vue生命周期的解析 > 1>什么是vue生命周期 每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.详细来说,就是Vue实例从开始创建,初始化数据, ...

  4. 简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序

    首先,vue生命周期可以用下图来简单理解 当然这也是官方文档的图片,详细的vue周期详解请参考这里 然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCr ...

  5. VUE生命周期中的钩子函数及父子组件的执行顺序

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...

  6. Vue生命周期,我奶奶看了都懂了

    最近一直在学习Vue,而vue生命周期是我们不可能绕开的一个很核心的知识点,今天来简单的梳理一下大概的内容. 一.钩子函数 在一开始学习的时候,总有钩子函数这个名词冒出来,而且在vue官网文档中也频繁 ...

  7. vue生命周期的介绍

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. vue 生命周期

    一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...

  9. 详解vue生命周期

    vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...

随机推荐

  1. Linux:ssh_config快速访问服务器

    在当前用户的根目录下: cd ~/.ssh vi config 编辑config内容为下面: ForwardAgent yes Host 1 Hostname 192.168.1.1 User roo ...

  2. (NO.00004)iOS实现打砖块游戏(六):反弹棒类

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 打砖块游戏另一个要素是反弹棒,我们在这篇类来实现反弹棒类. 创建 ...

  3. [rrdtool]监控和自动画图,简单的监控.md

    现在想要监控服务的流量和并发数,可是又没那么多时间来写系统,其他的运维系统又不熟悉,于是就用现有的rrdtool shell做了个简单的监控界面,临时用下,也算是个小实验把. rrdtool也是刚接触 ...

  4. 【一天一道LeetCode】#107. Binary Tree Level Order Traversal II

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 来源: htt ...

  5. -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable a

    eclipse中使用maven插件的时候,运行run as maven build的时候报错 -Dmaven.multiModuleProjectDirectory system propery is ...

  6. UNIX环境高级编程——进程环境

    一.main函数 C程序总是从main函数开始.当内核执行C程序时,在调用main前先调用一个特殊的启动例程.可执行程序文件将此启动例程指定为程序的起始地址--这是由连接编译器设置的,而连接编译器则由 ...

  7. Python学习笔记 - ifelifelse-forin-while

    if elif else #!/usr/bin/env python3 # -*- coding: utf-8 -*- age = 20 if age >= 18: print('your ag ...

  8. Git版本控制 — 日常使用(二)

    本地使用 以下是我的一些日常操作. (1) 创建版本库 # cd /proj # git init Initialized empty Git repository in /proj/.git/ (2 ...

  9. HTML5进阶(三)HBuilder实现软件自动升级(优化篇)

    HBuilder实现软件自动升级(优化篇) 前言 受前篇博客<HTML5进阶(二)HBuilder实现软件自动升级>(点击查看详情)的影响,测试过程中发现APP自动更新还是存在问题,第一次 ...

  10. 【翻译】Ext JS 5的委托事件和手势

    原文:Delegated Events and Gestures in Ext JS 5 简介 Ext JS在5之前的版本,被设计为专用于传统鼠标输入的桌面设备使用.而从5开始,添加了对触屏输入的支持 ...