先上一张vue组件生命周期的流程图

以上就是一个组件完整的生命周期,而在组件处于每个阶段时又会提供一些周期钩子函数以便我们进行一些逻辑操作,而总体来讲 vue的组件共有8个生命周期钩子

beforeCreate 实例创建前
create 实例创建后
beforeMount dom挂载前
mounted dom挂载后
beforeUpdate 数据更新前
updated 数据更新后
beforeDestroy 组件实例销毁前
destroyed 组件实例销毁后
 
每一个生命周期,vue做的事情不同,所以一些属性和方法,只有在vue把事情做完之后才能访问
上一段代码
  name: "HelloWorld",
data() {
return {
test:"1"
};
},
//初始化实例前
beforeCreate() {
console.log("实例初始化前", this.$el, this.$data,this.test);
},
//初始化实列后
created() {
console.log("实例初始化后", this.$el, this.$data,this.test);
},
//第一次挂载前
beforeMount() {
console.log("第一次挂载前", this.$el, this.$data);
},
//第一次挂载后
mounted() {
console.log("第一次挂载后", this.$el, this.$data);
},
//数据更新前
beforeUpdate() {
console.log("数据更新前", this.$el, this.$data);
},
//数据更新后
updated() {
console.log("数据更新后", this.$el, this.$data);
},
//组件销毁前
beforeDestroy() {
console.log("组件销毁前", this.$el, this.$data);
},
//组件销毁后
destroyed() {
console.log("组件销毁后", this.$el, this.$data);
}
}

以上代码执行打印出来的结果是

1. beforeCreate 实例化之前
 
在这个阶段 $el和$data都还是undefined 状态,
dom和data,computed中的字段 都无法访问
 
2. create 实例化之后
 
在这个阶段 data已经观察完毕,data中所有的字段都已经加上了getter和setter属性,computed初始化完毕,但是$el仍是undefined的状态,
所以 往往在这个钩子上 就可以发送http请求获取后端数据了,进行data的初始化了,也有写同学喜欢在mounted 上获取数据,两者之间并没有太大的不同
 
3. beforemount dom挂载前
 
这个阶段 vue模板,和模板中使用的data字段,被解析成html字符串,相当于创建了一个html dom,但在此时 这个dom还没有被挂载到html文档上,所以$el仍是undefined
 
4.mounted dom挂载后
 
这个阶段vue编译的dom已经挂载至html上 这个阶段如果需要进行一些dom操作,就可以使用了列如 更改某个dom字体的颜色,dom绘制二维码等依赖于dom必须存在的逻辑
 
5.beforeUpdate数据更新前 update数据更新后
 
当页面使用到的datat属性发生变化时才会触发(如果页面使用的是data字段的computed属性,一样会触发)。只是使用,但页面没有依赖的data属性在变化时是不会触发这两个钩子函数的,这两个钩子函数通常不会编写什么逻辑代码,当然如果有需要也不是绝对的。
值得一提的是,只有这两个钩子函数是可以多次触发的,其他的钩子函数都只会触发一次
 
6.beforeDestroy组件销毁前
 
这一步还可以用this来获取实例,
一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件
 
7.destroyed组件销毁后
 
在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用,但你仍然可已访问当前实例的$data $el
 
 
 
 

vue 学习一 组件生命周期的更多相关文章

  1. AngularJs学习笔记-组件生命周期

    组件生命周期 (1)组件生命周期钩子 constructor:组件创建时被创建 ngOnChanges: 父组件修改或初始化子组件的输入属性时被调用,如果子组件没有输入属性,则永远不会被调用,它的首次 ...

  2. stenciljs 学习三 组件生命周期

    stenciljs 组件包含好多生命周期方法, will did load update unload 实现生命周期的方法比价简单类似 componentWillLoad ....,使用typescr ...

  3. VUE 学习笔记 二 生命周期

    1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...

  4. vue学习(十九) 生命周期 了解

    生命周期:从vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期 生命周期钩子:就是生命周期事件的别名而已 生命周期钩子==生命周期函数==生命周期事件 生命周期函数分类 ...

  5. Vue 封装的组件生命周期钩子

    export default { // ... // 在组件初始化时调用,可以简单理解为页面加载时 created () { // 存在 localStorage 的缓存内容 if (localSto ...

  6. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  7. vue父子组件生命周期执行顺序

    之前写了vue的生命周期,本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程,以及各个生命周期的特点.然而今天被问到父子组件生命周期执行顺序的时候一头雾水,根本不知道怎么回事.然后写了一段 ...

  8. Vue父子组件生命周期执行顺序及钩子函数的个人理解

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...

  9. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

随机推荐

  1. Oracle中删表遇到ORA-14452

    删表的时候碰到表忙的情况,会报错. DROP TABLE TMP_TAB_T_AGENT * ERROR at line 1: ORA-14452: attempt to create, alter ...

  2. Javafx弹窗

    在javafx中可能用到一些弹窗,比如点击某个按钮后弹出弹窗提示信息等等 Alert alert = new Alert(AlertType.INFORMATION); alert.setTitle( ...

  3. 开机流程 模块管理 Loader

    主机系统开机流程 boot loader 主要功能 显示核心模块加载信息 查询模块信息 核心模块的加载与移除 boot loader 的两个 stage grup2配置文件  /boot/grub2/ ...

  4. 小米手机 - Charles无法安装证书 因为无法读取证书

    1.不要使用小米原装的浏览器安装证书 2.使用第三方浏览器安装,如我使用的是UC浏览器 3.使用第三方浏览器安装的证书格式是".pem"格式问卷 4.将这个文件放入小米的downl ...

  5. Codeforces 1167E 尺取法

    题意:给你一个长度为n的数组,以及数组中的数的取值范围1 - m,问有多少个区间[l, r],使得删除了数组中数值为[l, r]的数之后,数组是非递减的. 思路:我们记录一下每一个数出现的最左端和最右 ...

  6. SpringCloud---分布式服务跟踪---Spring Cloud Sleuth

    1.概述 1.1 为什么要用到服务跟踪? 随着业务的发展,系统规模也会变得越来越大,各服务之间的调用关系也变得越来越错综复杂: 通常一个由客户端发起的请求   在后端系统中会经过多个不同的微服务调用  ...

  7. css自适应问题

    1. 图片自适应 <img src="app-logo.png" srcset="app-logo.png 175w,app-logo-double.png 365 ...

  8. SQl 分组后按照某一列拼接字符串

    /* 分组之后拼接字符串 */ ;with t as( SELECT WorkflowId,Remark FROM dbo.OperatorAutomationProcess GROUP BY Wor ...

  9. ruby中数组认识

    a = 1...5这样赋值,a不是数组类型,1...5操作是一种枚举类型. a = ["1","2","3","4"], ...

  10. ArcMAP中Excel数据转换为shp数据

    参考百度知道:http://jingyan.baidu.com/article/f7ff0bfc1cf22c2e26bb138d.html 将数据库中带有X.Y坐标的二维表转换为空间点数据:从数据中将 ...