vue 学前班003(生命周期)

ue把整个生命周期划分为创建、挂载、更新、销毁等阶段,每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。学习实例的生命周期,能帮助我们理解vue实例的运作机制,更好地合理利用各个钩子来完成我们的业务代码。

我们分别来看看这几个阶段:

1. beforeCreate

此阶段为实例初始化之后,此时的数据观察和事件配置都没好准备好。

我们试着console一下实例的数据data和挂载元素el,代码如下:

  <div id="app">{{name}}</div>
  <script>
    let app = new Vue({
      el:"#app",
        data:{
         name:"前端"
      },
      beforeCreate(){
         console.log(‘即将创建‘);
         console.log(this.$data);
         console.log(this.$el);
      }
    });
 </script>

 

得到的结果是:

此时的实例中的datael还是undefined,不可用的。

2. created

beforeCreate之后紧接着的钩子就是创建完毕created,我们同样打印一下数据data和挂载元素el,看会得到什么?

在上一段代码的基础上,加上下面这段代码:

 created(){
    console.log(‘创建完毕‘);
    console.log(this.$data);
    console.log(this.$el);
 }

  

我们看到打印的结果:

此时,我们能读取到数据data的值,但是DOM还没生成,所以属性el还不存在,输出$data为一个Object对象,而$el的值为undefined。

3. beforeMount

上一个阶段我们知道DOM还没生成,属性el还为undefined,那么,此阶段为即将挂载,我们打印一下此时的$el是什么?

增加一下代码:

 beforeMount(){
    console.log(‘即将挂载‘);
    console.log(this.$el);
 }

 

此时的$el不再是undefined,而是成功关联到我们指定的dom节点<div id=”app”></div>,但此时{{ name }}还没有被成功地渲染成我们data中的数据。没事,我们接着往下看。

4. mounted

mounted也就是挂载完毕阶段,到了这个阶段,数据就会被成功渲染出来,我们编写mounted的钩子,打印$el 看看:

 mounted(){
    console.log(‘挂载完毕‘);
    console.log(this.$el);
 }

 

打印结果:

挂载完毕

如我们所愿,此时打印属性el,我们看到{{ name }}已经成功渲染成我们data.name的值:“前端”。

5. beforeUpdate

我们知道,当修改vue实例的data时,vue就会自动帮我们更新渲染视图,在这个过程中,vue提供了beforeUpdate的钩子给我们,在检测到我们要修改数据的时候,更新渲染视图之前就会触发钩子beforeUpdate。

html片段代码我们加上ref属性,用于获取DOM元素(后期会讲到)。

 <div ref="app" id="app">
    {{name}}
 </div>

  

Vue实例代码加上beforeUpdate钩子代码:

 beforeUpdate(){
  console.log(‘=即将更新渲染=‘);
  let name = this.$refs.app.innerHTML;
  console.log(‘name:‘+name);
 },

我们在控制台把app.name的值从原来的 “前端君” 修改成 “web前端教程”,在更新视图之前beforeUpdate打印视图上的值,结果依然为原来的值:“前端君”,表明在此阶段,视图并未重新渲染更新

6. updated

此阶段为更新渲染视图之后,此时再读取视图上的内容,已经是最新的内容,接着上面的案例,我们添加钩子updated的代码,如下:

 updated(){
  console.log(‘==更新成功==‘);
  let name = this.$refs.app.innerHTML;
  console.log(‘name:‘+name);
 }

  

大家注意两个不同阶段打印的name的值是不一样,updated阶段打印出来的name已经是最新的值:“web前端教程”,说明此刻视图已经更新了。

7. beforeDestroy

调用实例的destroy( )方法可以销毁当前的组件,在销毁前,会触发beforeDestroy钩子。

8. destroyed

成功销毁之后,会触发destroyed钩子,此时该实例与其他实例的关联已经被清除,它与视图之间也被解绑。

案例:我们通过在销毁前通过控制台修改实例的name,和销毁之后再次修改,看看情况。

 beforeDestroy(){
   console.log(‘销毁之前‘);
 },
 destroyed(){
   console.log(‘销毁成功‘);
 }

  


销毁之前,修改name的值,可以成功修改视图显示的内容为:“更新视图”,一旦效用实例的$destroy( )方法销毁之后,实例与视图的关系解绑,再修改name的值,已于事无补,视图再也不会更新了,说明实例成功被销毁了。

9. actived

keep-alive组件被激活的时候调用。

10. deactivated

keep-alive 组件停用时调用。

关于keep-alive组件的激活和停用,我们后面讲到具体案例再介绍,在这里你只需要知道vue提供了keep-alive组件激活和停用的钩子就可以了。

本节小结

掌握实例生命周期的8个阶段:

时间: 2024-11-06 03:41:43

vue 学前班003(生命周期)的相关文章

聊一聊Vue实例与生命周期运行机制

Vue的实例是Vue框架的入口,担任MVVM中的ViewModel角色,所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个过程中,事件钩子可以辅助我们对整个实例生成.编译.挂载.销毁等过程进行js控制,给我们提供了执行自定义逻辑的机会.所以学习实例的生命周期,能帮助我们理解vue实例的运行机制,更

vue组件的生命周期

先来张组件生命周期的示意图: 文档里是这样描述的:你不需要立马弄明白所有的东西,不过以后它会有帮助.传送门. Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期待的Vue实例不同. 1.beforeCreate 在实例初始化之后,数据观测和event/watcher时间配置之前被调用. 2.created 实例已经创建完成之后被调用.在这一步,实例

vue与 react 生命周期

Vue vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么? beforeCreate 实例创建前:这个阶段实例的data.methods是读不到的created 实例创建后:这个阶段已经完成了数据观测(data observer),属性和方法的运算, watch/event 事件回调.mount挂载阶段还没开始,$el 属性目前不可见,数据并没有在DOM元素上进行渲染beforeMount:在挂载开始之前被调用:相关的 render

Vue中对生命周期的理解

Vue中对生命周期的理解 1. 实例.组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载ね,只是一个空壳,无法访问到数据和真实的dom,一般不做操作 2. 挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数,在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取 3. 接下来开始找实例

从零开始学 Web 之 Vue.js(三)Vue实例的生命周期

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.vue实例的生

关于Vue实例的生命周期(2)

 关于Vue实例的生命周期(2) 创建(create)->挂载(mount)->更新(update)->销毁(destory) 钩子函数触发事件 beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. created 实例已经创建完成之后被调用.在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调.然而,挂载阶段还没开始,$el 属性目

黑马eesy_15 Vue:vue语法和生命周期与ajax异步请求

自学Java后端开发,发现14 微服务电商[乐优商城]实战项目,在介绍完SpringCloud后就要肝前端基础知识ES6和Vue. 所以本篇入门Vue练习记录的过程,目的是供自学后端Java遇到Vue使用需求的时候加强一下Vue基本使用的能力. vue语法和生命周期与ajax异步请求 1.Vue的快速入门2.Vue的语法 插值表达式 事件的绑定 数据的显示 逻辑判断和循环输出3.Vue的生命周期 8个生命周期的执行点 4个基本的 4个特殊的4.axios的ajax异步请求 它和jquery的aj

vue学习笔记(四)——Vue实例以及生命周期

1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM |   |-------el (提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.) |   |-------template (一个字符串模板作为 Vue 实例的标识使用.模板将会 替换 挂载的元素.挂载元素的内容都将被忽略,除非模板的内容有分发 slot.) |   |-------render (字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力.) |---

关于Vue实例的生命周期created和mounted的区别

什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期. 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例. 再上图,对生命周期图的标注 特别值得注意的是created钩子函数和mounted钩子函数的区