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

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. NSLog debug时打印 release时不打印

    创建.h文件,添加以下代码 #ifdef  DEBUG #define NSLog(...)  NSLog(__VA_ARGS__) #else #define NSLog(...)  {} #end ...

  2. 简单对比一下不同Windows操作系统在相同硬件配置的情况下浏览器js引擎的性能

    最近部门进行Windows客户端的测试产品单点性能, 感觉不在通的windows版本以及浏览器内核的情况下性能可能有差异, 也一直没有找到一个比较好的对比工具, 今天用chrome的控制台简单测试了下 ...

  3. 当返回值为json字符串时 如何获得其中的json数组

    json数据格式 {"IPPORT":"192.168.0.12","time":"2017-04-05 09:12:06&quo ...

  4. Mysql性能优化二:索引优化

    1 索引的类型 UNIQUE唯一索引 不可以出现相同的值,可以有NULL值. INDEX普通索引 允许出现相同的索引内容. PRIMARY KEY主键索引 不允许出现相同的值,且不能为NULL值,一个 ...

  5. mxnet,theano与torch的简单比较

    这篇文章我想来比较一下Theano和mxnet,Torch(Torch基本没用过,所以只能说一些直观的感觉).我主要从以下几个方面来计较它们: 1.学习框架的成本,接口设计等易用性方面. 三个框架的学 ...

  6. loadrunner基础学习笔记六-运行负载

    controller视图: 场景组 窗格:查看场景组内vuser状态,使用窗格右侧的按钮可以启动.停止和重置场景,查看各个vuser的状态,通过手动添加更多vuser增加场景运行期间应用程序的负载 场 ...

  7. Nginx referer防盗链模块

    L75 referer模块 ngx_http_referer_module 默认编译进nginx valid_referers 指令 Syntax: valid_referers none | blo ...

  8. 华为5G在印度被禁

    前段时间,澳大利亚政府以“担心外国渗透”为由,决定禁止华为为建设新的5G网络提供设备.这让大家不禁猜测,难道华为的5G真的被国外市场禁入了? 对此,华为表达出了极大的失落感,并在一份声明中称,“政府告 ...

  9. BZOJ2794[Poi2012]Cloakroom——离线+背包

    题目描述 有n件物品,每件物品有三个属性a[i], b[i], c[i] (a[i]<b[i]).再给出q个询问,每个询问由非负整数m, k, s组成,问是否能够选出某些物品使得:1. 对于每个 ...

  10. ueditor 使用

    之前在微信上用到富文本编辑器,选用了ueditor 之后又在项目中使用到了,因此打算写下来记录一下. 1  首先去下载ueditor 2  我的是 MVC项目,贴一下:粘贴到Content下 3 然后 ...