vue基础篇---生命周期

每个钩子函数都在啥时间触发
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基础篇---生命周期的更多相关文章
- Vue.js 源码分析(九) 基础篇 生命周期详解
先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated .beforeDes ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue 基础篇
Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...
- vue组件的生命周期
先来张组件生命周期的示意图: 文档里是这样描述的:你不需要立马弄明白所有的东西,不过以后它会有帮助.传送门. Vue2.0的生命周期钩子一共有10个,同样结合官方文档作出了下表 生命周期钩子 详细 b ...
- 从零开始学 Web 之 Vue.js(三)Vue实例的生命周期
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue 实例的生命周期
Vue把整个生命周期划分为创建.挂载.更新.销毁等阶段,每个阶段都会给一些"钩子"让我们来做一些我们想实现的动作. 分为以下几个阶段 1.beforeCreate 此阶段为 ...
- Vue基础之生命周期函数[残缺版]!
Vue基础之生命周期函数[残缺版]! 为什么说是残缺版呢?! 因为有一些周期函数我并没有学到!所以是残缺版! 01 beforeCreate //在实例初始化之后,数据观测 (data observe ...
- Vue js 的生命周期详解
Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
随机推荐
- Sql语句报ORA-01795: 列表中的最大表达式数为 1000
错误信息:java.sql.SQLException: ORA-01795: 列表中的最大表达式数为 1000,错误信息如下: serviceid是:work -------------other W ...
- 我的集合学习笔记--LinkedList
一,Node节点: /** * 存储元素基本单位 */ public class Node { Object data; Node pre; Node next; public Node(Node p ...
- Linux下OSG的编译和安装以及遇到的问题
(第一段日常扯蛋,大家不要看)由于我们教研室所做的RTMapper要用到GDAL,所以就打算看osgearth的源码来熟悉下GDAL库的使用,同时也了解下osgearth中关于带有高程的图像拼接.然而 ...
- hive数据查询
Fetch task 丢弃了mapreduce的作业的繁重任务,查询方便简单 1.第一种方式 2.linux命令行 3.地3中
- spring学习总结(一)_Ioc基础(上)
最近经历了许许多多的事情,学习荒废了很久.自己的目标成了摆设.现在要奋起直追了.最近发现了张果的博客.应该是一个教师.看了他写的spring系列的博客,写的不错.于是本文的内容参考自他的博客,当然都是 ...
- loadrunner基础学习笔记三
运行时设置: 打开运行时设置:任务窗格中-选择回放-点击运行时设置按钮 1 重复执行次数:=2 2 步:控制迭代时间间隔 3 日志设置:指出要在运行测试期间记录的信息量 4 思考时间:可以在cont ...
- 深度学习网络压缩模型方法总结(model compression)
两派 1. 新的卷机计算方法 这种是直接提出新的卷机计算方式,从而减少参数,达到压缩模型的效果,例如SqueezedNet,mobileNet SqueezeNet: AlexNet-level ac ...
- CUDA ---- Warp解析
Warp 逻辑上,所有thread是并行的,但是,从硬件的角度来说,实际上并不是所有的thread能够在同一时刻执行,接下来我们将解释有关warp的一些本质. Warps and Thread Blo ...
- codeforces278A
Circle Line CodeForces - 278A 郑州地铁的圆线有n个车站. 我们知道所有邻近站点之间的距离: d[1]是第1站和第2站之间的距离;d[2]是第2站和第3站之间的距离;… d ...
- CF527D
题面 这题还挺水的,把那个式子稍微变形一下就可以的到xi-wi>=xj+wj,易知:若把每个点看做一条线段,左端点是xi-wi,右端点是xi+wi,就只要求最多的不重叠的线段数就可以了,然后就是 ...