vue生命周期函数可以操作dom_vue生命周期钩子函数（详解及使用场景）

![1、beforeCreate (使用频率低)

* 在实例创建以前调用

* 没有实例化，数据访问不到

2、 created (使用频率高)

* 实例被创建完成后调用

* 能拿到数据

* 能修改数据，

* 且修改数据不会触发updated beforeUpdate钩子函数

* 可以在这个钩子函数里发请求，访问后端接口拿数据

* 判断是否存在el，是否存在template，如果二者都有，以template为主优先，如果没有template,会选择el模板。

如果二者都没有，有$mount 也可以调用模板

3、beforeMount

真实的dom节点挂载到页面之前

编译模板已经结束，虚拟dom已经存在，

可以访问数据，也可以更改数据

且修改数据不会触发updated beforeUpdate钩子函数

在beforeMount和mounted之间隐藏了一个render函数，千万不能写，会覆盖系统函数

4、mounted(挂载)

真实的dom节点挂载到页面以后

this.$refs找到ref表示的节点

可以访问和更改数据

且修改数据会触发updated beforeUpdate钩子函数

5、beforeUpdate

* 修改之前调用

6、updated

* 修改之后调用

* beforeUpdate 、updated 可以监控data里的所有数据变化

* 不要在update beforeUpdate修改不定数据，否则会引起死循环

* 监听data里的所有的数据，非updated莫属

7、beforeDestroy

* 实例卸载以前调用，可以清理非vue资源,防止内存泄露

8、destroyed

9、activated (使用频率较低) keep-alive 缓存组件时候调用

10、deactivated 缓存组件卸载的时候调用

vue生命周期函数可以操作dom_vue生命周期钩子函数（详解及使用场景）相关推荐

vue生命周期函数可以操作dom_vue生命周期钩子函数
前言在使用vue开发的过程中,我们经常会接触到生命周期的问题.那么你知道,一个标准的工程项目中,会有多少个生命周期勾子吗?让我们来一起来盘点一下: 根组件实例:8个 (beforeCreate.cr ...
vue生命周期钩子函数详解
先放一张官网生命周期图: vue有8种生命周期函数: 钩子函数触发的行为在此阶段可以做的事情 beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined,还未 ...
vue动画过渡 javascript钩子函数详解
vue动画过渡js钩子函数详解前言 js钩子函数运行时间 js钩子函数的过渡或动画总结结语前言转载请注明出处并附上链接. 本文中,enter(leave)过程指的是beforeEnter.e ...
Vue生命周期钩子函数的使用以及应用场景
文章目录前言钩子函数介绍 beforeCreate(创建前) created(创建后) beforeMounted(挂载前) mounted(挂载后) beforeUpdate(更新前) upda ...
史上最全的Vue生命周期钩子函数11个
什么是生命周期? 生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例: 在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,在这 ...
不来看看这些 VUE 的生命周期钩子函数？ | 原力计划
作者 | huangfuyk 责编 | 王晓曼出品 | CSDN 博客 VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化.可以分为:创建.挂载.更新.销毁四 ...
vue生命周期钩子函数有哪些
每个vue实例从创建到销毁的过程就是vue的一个生命周期,每个阶段都有对应的钩子函数,当我们想在vue的不同时期操作vue实例是,就可以在不同的钩子函数中进行 vue有8种生命周期函数: before ...
vue生命周期钩子函数
vue实例的生命周期:从创建到销毁的整个过程 1.钩子函数 vue框架内置函数,随着组件的生命周期阶段,自动执行使用钩子函数可以知道vue生命周期到达了什么阶段作用:在特定的时间点执行特定的操作 ...
教女朋友学习 vue的生命周期钩子函数
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...

vue生命周期函数可以操作dom_vue生命周期钩子函数（详解及使用场景）

vue生命周期函数可以操作dom_vue生命周期钩子函数（详解及使用场景）相关推荐

最新文章

热门文章