vue的生命周期和钩子函数的理解

对于vue的生命周期,官方文档上并没有太多的文字性说明,把自己对生命周期和钩子函数的理解记录下来

官方文档

自己的理解

  vue生命周期的概念:vue对象从被创建,到执行逻辑,最后到被销毁的过程。

  具体流程:

      1)vue实例的创建

      2)初始化事件和生命周期

      3)初始化data和methods

      4)生成虚拟dom $el(将没有解析的指令的dom加载到内存中)

      5)使用$el 来替代el,并且将$el中的指令进行解析

      6)进行状态mounted的循环

        判断data中的数据是否发生改变,如果改变,则跟新虚拟dom 并且重新渲染,重新进入mounted状态

      7)vue实例的销毁

  钩子函数的概念:vue为我们准备的空函数,函数中的内容可以融入到生命周期中,通俗的来说,就是vue执行生命周期的过程中,有很多的逻辑代码,将来有可能有需求:在某一段逻辑代码中添加自己的代码,为了解决这一问题。

  函数:

    1)在初始化data和methods时执行

      之前:beforeCreate

      之后:Created(重点)

    2)在使用虚拟dom替换el时执行

      之前:beforeMount

      之后:mounted(重点)

    3)当数据发生改变时,重新渲染虚拟dom时执行

      之前:beforeUpdated

      之后:updated

    4)当调用$destory方法时执行($destory销毁vue实例)

      之前:beforeDestroy

      之后:destroy

总结:

  将生命周期和其对应的钩子函数对应的记忆,可以更容易的理解vue的生命周期

原文地址:https://www.cnblogs.com/zhige-1/p/11002066.html

时间: 2024-08-28 15:40:14

vue的生命周期和钩子函数的理解的相关文章

vue生命周期、钩子函数

https://segmentfault.com/a/1190000011381906    详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期. 可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数,然后我们再一一详解: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy

Vue的过滤器,生命周期的钩子函数和使用Vue-router

一.过滤器 1.局部过滤器 在当前组件内部使用过滤器 给某些数据 添油加醋 //声明 filters:{ '过滤器的名字':function(val,a,b){ //a 就是alax ,val就是当前的数据 } } //使用 管道符 数据 | 过滤器的名字('alex','wusir') <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

生命周期的钩子函数

生命周期的钩子函数(写在方法的下面,一共有11个) 1.vue的整个生命周期的特定时刻,自动调用的函数 2.beforeCreate 实例创建之前调用, 数据没有挂载,不能访问数据 vue实例初始化的时候就被执行(数据加载之前执行的一个函数,拿不到data里面的数据) 3.created 实例创建之后调用,能访问.修改数据,单修改数据不会触发updated函数  在这里可以向服务器请求数据,(也可以拿到父组件的数组进行修改等操作,这一步骤是没有操作到模板,数据和模板还没有结合) 下一步就是开始找

Vue生命周期和钩子函数及使用keeplive缓存页面不重新加载

Vue生命周期 每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,在这个过程中会有一些钩子函数会得到回调 Vue中能够被网页直接使用的最小单位就是组件,我们经常写的: var vm = new Vue({ el: '#app', ...... } 是根组件,el指定了它的模板(id为app的元素包裹的部分),相对于template属性 也可以这样写: var vm = new Vue({ ...... } vm.$mount("#app"); 根组件里

vue2.0项目实战(3)生命周期和钩子函数详解

最近的项目都使用vue2.0来开发,不得不说,vue真的非常好用,大大减少了项目的开发周期.在踩坑的过程中,因为对vue的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 下面来总结一下vue的生命周期. vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执行. <!DOCTYPE html>

Vue2.0 探索之路——生命周期和钩子函数的一些理解(转)

前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的. 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 于是我开始先去搜索,发现vue2.0的生命周期没啥文章.大多是1.0的版本介绍.最后还是找到一篇不错的(会放在最后) vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0

Vue2.0 探索之路——生命周期和钩子函数的一些理解

前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的. 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 于是我开始先去搜索,发现vue2.0的生命周期没啥文章.大多是1.0的版本介绍.最后还是找到一篇不错的(会放在最后) vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0

对vue生命周期/钩子函数的理解

对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos()).这是因为箭头函数绑定了父上下文,因此this与你期待的 Vue 实例不同,this.fetchTodos的行为未定义. 下面附加

Vue生命周期/钩子函数的理解

对于实现页面逻辑交互等效果,我们必须弄懂vue的生命周期,知道我们写的东西应该挂载到哪里.vue官方api给了简单的逻辑,如下: 所有的生命周期钩子自动绑定this上,因此你可以访问数据,属性和方法进行运算,所以要特别注意的是不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos()). 下面附加一张生命周期图示 <!DOCTYPE html> <html> <head> <title></tit