生命周期的钩子函数

生命周期的钩子函数(写在方法的下面,一共有11个)

1.vue的整个生命周期的特定时刻,自动调用的函数

2.beforeCreate 实例创建之前调用, 数据没有挂载,不能访问数据

vue实例初始化的时候就被执行(数据加载之前执行的一个函数,拿不到data里面的数据)

3.created 实例创建之后调用,能访问、修改数据,单修改数据不会触发updated函数  在这里可以向服务器请求数据,(也可以拿到父组件的数组进行修改等操作,这一步骤是没有操作到模板,数据和模板还没有结合)

下一步就是开始找模板,找不到的话就把el接管的div作为模板,如果有模板就会渲染模板

4.beforeMount 编译模板已经完成(模板和数据都已经准备就绪了) 虚拟dom已经存在 还没有进行进行渲染

也能修改数据,但是修改数据不会触发update函数(组件不卸载,只能执行一次)

5.render 渲染是vue自动完成的。如果手动写render函数,渲染的东西

就会把  vue自动渲染的东西覆盖调

6. mounted 真实的dom元素已经存在, 可以获取节、修改数据,而且修改数据会触发update函数(页面已经渲染,替换了之前的dom元素)

7. beforeUpdate 数据更新之前触发(数据更新:就是dom上的数据发生变化)

8. updated  数据修改后执行 修改数据要可能造成死循环(在这里尽量不要修改数据)

9. beforeDestroy  销毁之前 要做一些清理工作,防止内存泄漏

10. activated   keep-alive 激活动态组件时调用

11. deactivated  keep-alive 卸载动态组件时调用(已经销毁的时候执行)

Vue生命周期

1、什么是vue生命周期?

答: Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

2、vue生命周期的作用是什么?

答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3、vue生命周期总共有几个阶段?

答:它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后

4、第一次页面加载会触发哪几个钩子?

答:第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

5、DOM 渲染在 哪个周期中就已经完成?

答:DOM 渲染在 mounted 中就已经完成了。

6、简单描述每个周期具体适合哪些场景?

答:生命周期钩子的一些使用方法: beforecreate : 可以在这加个loading事件,在加载实例时触发 created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用 mounted : 挂载元素,获取到DOM节点 updated : 如果对数据统一处理,在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

原文地址:https://www.cnblogs.com/lujiani/p/9986291.html

时间: 2024-10-02 23:24:59

生命周期的钩子函数的相关文章

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">

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

对于vue的生命周期,官方文档上并没有太多的文字性说明,把自己对生命周期和钩子函数的理解记录下来 官方文档 自己的理解 vue生命周期的概念:vue对象从被创建,到执行逻辑,最后到被销毁的过程. 具体流程: 1)vue实例的创建 2)初始化事件和生命周期 3)初始化data和methods 4)生成虚拟dom $el(将没有解析的指令的dom加载到内存中) 5)使用$el 来替代el,并且将$el中的指令进行解析 6)进行状态mounted的循环 判断data中的数据是否发生改变,如果改变,则跟

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生命周期和钩子函数及使用keeplive缓存页面不重新加载

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

Vue学习系列(四)——理解生命周期和钩子

前言 在上一篇中,我们对平时进行vue开发中遇到的常用指令进行归类说明讲解,大概已经学会了怎么去实现数据绑定,以及实现动态的实现数据展示功能,运用指令,可以更好更快的进行开发.而在这一篇中,我们将通过实例,探究vue的生命周期. 万物皆有灵,世间万物都拥有灵魂,小到山河湖海,花草树木,蚂蚁到人类,以及所有的动植物,大到地球星空和宇宙,都拥有灵魂,可以说他们都是有生命的,只是他们的生命形态是我们人类所不能理解的存在.在生产中,生命周期通俗来讲,就是从自然中来回到自然中去的全过程,也就是从采集材料设

Android React Native组件的生命周期及回调函数

熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开发中,React Native组件的生命周期,大致分为三个阶段,分别是: 1.组件第一次绘制阶段,这个阶段主要是组件的加载和初始化: 2.组件在运行和交互阶段,这个阶段组件可以处理用户交互,或者接收事件更新界面: 3.组件卸载消亡的阶段,这个阶段主要是组件的清理工作. 在Android React