每个钩子函数都在啥时间触发

beforeCreate

在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

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

beforeMount

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

mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

updated

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

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

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

beforeDestroy

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

destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

如果用 keep-alive 来实现缓存的话   还有   activated 这个钩子, 意思是当页面重新打开新的页面的时候就会触发。相对的,当页面隐藏或者另外一个页面替换掉这个页面的时候也会触发deactivated这个钩子,exclude 参数的意思是指 那个组件不缓存,值是组件的名字

<template>
<div id="app">
<keep-alive exclude="Detail">
<router-view/>
</keep-alive>
</div>
</template>

vue基础篇---生命周期的更多相关文章

  1. Vue.js 源码分析(九) 基础篇 生命周期详解

    先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated   .beforeDes ...

  2. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  3. Vue 基础篇

    Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...

  4. vue组件的生命周期

    先来张组件生命周期的示意图: 文档里是这样描述的:你不需要立马弄明白所有的东西,不过以后它会有帮助.传送门. Vue2.0的生命周期钩子一共有10个,同样结合官方文档作出了下表 生命周期钩子 详细 b ...

  5. 从零开始学 Web 之 Vue.js(三)Vue实例的生命周期

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. vue 实例的生命周期

      Vue把整个生命周期划分为创建.挂载.更新.销毁等阶段,每个阶段都会给一些"钩子"让我们来做一些我们想实现的动作. 分为以下几个阶段 1.beforeCreate   此阶段为 ...

  7. Vue基础之生命周期函数[残缺版]!

    Vue基础之生命周期函数[残缺版]! 为什么说是残缺版呢?! 因为有一些周期函数我并没有学到!所以是残缺版! 01 beforeCreate //在实例初始化之后,数据观测 (data observe ...

  8. Vue js 的生命周期详解

    Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...

  9. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

随机推荐

  1. Git的其他用法

    目录: 减少[.git]文件夹的大小和文件数 更换git for windows的文本编辑器 修改已经提交的commit说明 合并commit 解决merge时出现的冲突 回退一个merge 获取某一 ...

  2. Cron Expression的用途

    对于一些MIS系统,DeadLine,需要用户自己制定事件规则,Cron Expression应该可以派上用场. Cron Maker: http://www.cronmaker.com/

  3. Eclipse Creating a New Runnable JAR File 清理工作空间下的配置文件

    D:\workspacegit\.metadata\.plugins\org.eclipse.debug.core\.launches 相关文件存在这里.

  4. jq源码解析之绑在$,jQuery上面的方法

    1.当我们用$符号直接调用的方法.在jQuery内部是如何封装的呢?有没有好奇心? // jQuery.extend 的方法 是绑定在 $ 上面的. jQuery.extend( { //expand ...

  5. [转帖] “王者对战”之 MySQL 8 vs PostgreSQL 10

    原贴地址:https://www.oschina.net/translate/showdown-mysql-8-vs-postgresql-10?lang=chs&page=2# 英文原版地址 ...

  6. CIO知识储备

    1.IT安全和法规知识是CIO的首要 2.IT项目管理专业知识是CIO的必备 3.合作伙伴管理和供应商管理对成功也很关键 4.企业数据管理技能对CIO越来越重要 5.企业财务技能是CIO的一种必备 6 ...

  7. 排查mysql innodb Lock wait timeout exceeded; try restarting transaction的问题

    OMG写的时候崩溃了一次. 触发关注这个问题的事情是 我们在使用pt-online-schedule 改表的时候总是拿不到锁,并且报出mysql innodb Lock wait timeout ex ...

  8. fullstack

    fullstack https://www.fullstack.io/ https://www.fullstack.io/write-a-book https://github.com/fullsta ...

  9. Cenos7 添加service,开机启动

    本地有一个 data-service.jar 1. 编写启动脚本  data-service-start [root@iz2ze0fq2isg8vphkpos5sz shell]# more data ...

  10. pgm14

    这部分讨论在有数据缺失情况下的 learning 问题,这里仍然假定了图结构是已知的. 首先需要讨论的是为什么会缺失,很多情况下缺失并不是“随机”的:有的缺失是人为的,那么某些情况下缺失的可以直接补上 ...