vue 学习一 组件生命周期

先上一张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

原文地址:https://www.cnblogs.com/wrhbk/p/11638622.html

时间: 2024-10-09 00:21:19

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

Vue 组件生命周期钩子

Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染完毕了.组件要被销毁了.组件销毁完毕了 等等时间节点, 每一个时间节点,vue都为其提供了一个回调函数(在该组件到达该时间节点时,就会触发对应的回调函数,在函数中就可以完成该节点需要完成的业务逻辑) # 3)生命周期钩子函数就是 vue实例的成员 beforeCreate 组件创建了,但数据和方法还

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

目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 2. router-link标签 3.逻辑跳转 this.$router 控制路由跳转 this.$route 控制路由数据 Vue组件文件微微细剖 组件在view 文件中创建 如果需要用到其他小组件可以 在 component文件中创建并导入 view文件下: <template> <di

vue 学前班003(生命周期)

ue把整个生命周期划分为创建.挂载.更新.销毁等阶段,每个阶段都会给一些"钩子"让我们来做一些我们想实现的动作.学习实例的生命周期,能帮助我们理解vue实例的运作机制,更好地合理利用各个钩子来完成我们的业务代码. 我们分别来看看这几个阶段: 1. beforeCreate 此阶段为实例初始化之后,此时的数据观察和事件配置都没好准备好. 我们试着console一下实例的数据data和挂载元素el,代码如下: <div id="app">{{name}}&l

angular4组件生命周期

Angular4 组件生命周期 钩子可以在特定的组件生命周期发生时执行所需要的业务逻辑,红框中的方法只会被调用一次,其余会被多次调用. 用户在组件初始化后看到组件,变更检测阶段会确保组件的属性与页面同步,如果由于路由等操作,组件从dom树上移除,那angular会执行组件的销毁阶段(变更检测中执行的方法与初始化是一个方法). 创建一个新组件,在生成的组件上已经实现了OnInit接口,每一个钩子都是@angular/core这个库里定义的接口,每个接口都有唯一的钩子方法,方法名是接口名加ng前缀构

Vue环境搭建以及生命周期

Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源cnpm vue ~~ django:vue是用来搭建vue前端项目的 1) 安装node 官网下载安装包,安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registry.npm.t

angular2系列教程(五)Structural directives、再谈组件生命周期

今天,我们要讲的是structural directives和组件生命周期这两个知识点.structural directives顾名思义就是改变dom结构的指令.著名的内建结构指令有 ngIf, ngSwitch and ngFor. 例子 例子是我自己改写的,编写一个structural directives,然后通过这个指令实例化和注销组件,在此同时监视组件生命周期. 源代码 UnlessDirective 这个指令是官网示例中的指令. src/unless.directive.ts im

React组件生命周期

组件的生命周期 组件有两个值State状态和PorpType属性,当状态发生变化属性就会发生变化.状态确定属性确定. 状态发生变化时会触发不同的钩子函数,从而让开发者有机会做出响应.状态可以理解为事件. 组件生命周期内 初始化-运行- 销毁 初始化阶段可以使用的钩子函数:getDefaultPorps 获取实例的默认属性/getInitialState获取实例的初始化状态/componentWillMount组件即将被渲染/ render渲染/componentDidMount组件装载之后 运行

React Native组件生命周期

概述 所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点.就像 Android 开发中组件 一样,React Native的组件也有生命周期(Lifecycle). React Native组件的生命周期大致上可以划分为实例化阶段.存在阶段和销毁阶段.我们只有在理解组件生命周期的基础上,才能开发出高性能的app. React Native中组件的生命周期大致可以用以下图表示: 如图: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,

Android组件生命周期(二)

引言 应用程序组件有一个生命周期——一开始Android实例化他们响应意图,直到结束实例被销毁.在这期间,他们有时候处于激活状态,有时候处于非激活状态:对于活动,对用户有时候可见,有时候不可见.组件生命周期将讨论活动.服务.广播接收者的生命周期——包括在生命周期中他们可能的状态.通知状态改变的方法.及这些状态的组件寄宿的进程被终结和实例被销毁的可能性. 上篇Android组件生命周期(一)讲解了论活动的生命周期及他们可能的状态.通知状态改变的方法.本篇将介绍服务和广播接收者的生命周期: 服务生命