vue中的生命周期

1,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 中的生命周期和钩子函数

    生命周期: beforeCreate:el 和 data 并未初始化 (此方法不常用) created:完成了 data 数据的初始化,el的初始化未完成.用来发送ajax beforeMount:( ...

  2. vue中的生命周期事件和钩子函数

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

  3. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  4. 详解Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  5. Vue js 的生命周期详解

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

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

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

  7. vue组件的生命周期

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

  8. Vue.js-07:第七章 - Vue 实例的生命周期

    一.前言  在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...

  9. vue实例的生命周期

    Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...

随机推荐

  1. 关于错误CSC : error CS0006:未能找到元数据文件

    在不同的解决方案中把一个项目搬来搬去,终于出现了传说的CSC : error CS0006.编译的时候总是提示一个引用中不存在的项找不到.无论怎样删除项目,删除引用都没法通过生成. 最终解决方案: 用 ...

  2. centos solr 集群搭建

    一.什么是 SolrCloud SolrCloud(solr 云)是 Solr 提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud.当一个系统的索引数据量少的时 ...

  3. 洛谷—— P1262 间谍网络

    https://www.luogu.org/problem/show?pid=1262 题目描述 由于外国间谍的大量渗入,国家安全正处于高度的危机之中.如果A间谍手中掌握着关于B间谍的犯罪证据,则称A ...

  4. jqury+animation+setTimeOut实现渐变显示与隐藏动画

    初始效果 实现效果 1,编写HTMl结构代码 <div class="box"> <i class="icon"></i> ...

  5. 从零開始写游戏引擎(一) - project创建以及文件夹设置还有版本号控制

    一句话提要 好的開始等于成功了一半. 创建文件夹结构 project文件夹下最好分为以下几个文件夹 Docs - 开发文档,设计文档 Assets - 角色,动作,模型和音效等 Source - 代码 ...

  6. mysql开发之---每日一得01

    2015年7月7日------------------------- 1.truncate表会清空建表语句auto_increment的值:某个表的id即是主键也是自增,你能够选择插入随意id值,假设 ...

  7. 建议53:用状态模式美化代码,关于python-state工具包的理解

        在<编写高质量代码:改善python程序的91个建议>的建议53:用状态模式美化代码小节中,介绍了状态模式例如以下:就是当一个对象的内在状态改变时,同意改变其行为,但这个对象看起来 ...

  8. Windows 7 x64环境下JDK8安装过程

    Windows 7 x64环境下JDK8安装过程 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads ...

  9. listView 多个item布局

    package kds.szkingdom.wo.android.adapter; import java.util.List; import android.content.Context; imp ...

  10. python spark kmeans demo

    官方的demo from numpy import array from math import sqrt from pyspark import SparkContext from pyspark. ...