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. iOS中 流媒体播放和下载 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博 iOS中关于流媒体的简介:介于下载本地播放与实时流媒体之间的一种播放形式,下载本地播放必须全部将文件下载完成后才能播 ...

  2. java wait和notify及 synchronized sleep 总结

    java 中线程我一直弄不清线程锁等 所以写了一些例子验证看法: 在这之前先看下API中wait中的解释: wait:方法来之java.lang.Objetc 方法翻译:在其他线程调用此对象的 not ...

  3. 1060. Are They Equal (25)

    题目如下: If a machine can save only 3 significant digits, the float numbers 12300 and 12358.9 are consi ...

  4. Android初级教程三个Dialog对话框小案例

    这里把三个对话框形式写在一个项目程序里面,用三个按钮控制显示什么样式的对话框. 先看布局文件代码: <LinearLayout xmlns:android="http://schema ...

  5. visual studio 2015使用python tools远程调试maya 2016

    步骤: 1. 去https://apps.exchange.autodesk.com/MAYA/en/Home/Index搜索Developer Kit并下载,maya 2016可以直接点击这里下载. ...

  6. Android5.1设备无法识别exFAT文件系统的64G TF卡问题

    64G TF卡刚买回来的时候默认exFAT文件系统,在电脑端(XP和WIN7)可以识别,但在我们Android5.1S设备无法识别,采用guiformat工具格式化为FAT32文件系统后才可以正常识别 ...

  7. Opencv2.4.9、VS2010配置及grabcut代码实例

    最近opencv库更新到了2.4.9,作为小码农的我紧跟时代的步伐,装了2.4.9这个库.以下是我的配置步骤: 1.从http://opencv.org/上下载opencv2.4.9文件,由于我用的是 ...

  8. Ubuntu sudo 免密码之 sudoers 修改

    Ubuntu sudo 免密码之 sudoers 修改 重要提示: 本文内容仅在虚拟机上实验通过.如果你不确信这个过程,请不要擅自改变/etc/sudoers.否则可能导致你的机器不可用.本文对由此产 ...

  9. android studio签名

    1.Build -> Generate Signed APK...,打开如下窗口 2.假设这里没有打过apk包,点击Create new,窗口如下 这里只要输入几个必要项 Key store p ...

  10. 教你自己写Android第三方库

    其实Android studio的出现很大程度上方便了我们Android开发人员,今天我们说说怎么构建我们自己的库. 依次按File->New Moudle->android Librar ...