vue的生命周期和钩子函数

最新推荐文章于 2022-07-18 22:02:55 发布
最新推荐文章于 2022-07-18 22:02:55 发布
阅读量161 收藏
点赞数 3
分类专栏： vue 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenIsyyds/article/details/118487297
版权

​

vue的生命周期与钩子函数

vue的生命周期说的就是 vue 从创建到销毁的整个过程就是vue实例的生命周期

钩子函数

vue框架内置函数随着组件的生命周期阶段自动执行

生命周期分为 4个阶段 8个方法分别如下：

在这里插入图片描述

初始化：

beforeCreate 创建前

created 创建后，能访问到data中的数据变量以及methods中函数

1.发送网络请求

2.注册全局事件

在这里插入图片描述

挂载：

beforeMount 挂载前 template 中标签还没插入到真实DOM

mounted 挂载后 template 中标签已经插入到真实DOM

​ 获取真实DOM

在这里插入图片描述

更新：(用户交互)data数据改变才会执行

beforeUpdate 更新前 数据变化之前

updated 更新后 数据变化之后

数据不发生改变 俩个钩子都不会执行

数据变了 想获取最新的DOM 可以在 updatated 钩子中获取

在这里插入图片描述

销毁

beroreDestroy 销毁前

destroyed 销毁后

清理工作 优化工作

移除事件监听器

关闭定时器

解绑事件

销毁前

destroyed 销毁后

清理工作 优化工作

移除事件监听器

关闭定时器

解绑事件

在这里插入图片描述

chenIsyyds
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue 2.0中生命周期与钩子函数的一些理解
08-30
在 Vue 2.0 中，生命周期和钩子函数是两个非常重要的概念，它们之间存在紧密的联系，理解它们可以帮助开发者更好地使用 Vue.js 框架。本文将详细介绍 Vue 2.0 中的生命周期和钩子函数，以及它们之间的关系。 一、...
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
Vue实例的生命周期钩子函数
遥远的她'的博客
05-18 873
Vue的生命周期钩子函数有11个,不过我们经常用到就几个而已 beforeCreate这是第一个生命周期函数,表示实例初始化之后,完全创建出来之前,它刚初始化一个Vue空的实例对象,这个时候对象身上只有一些默认的事件和生命周期函数,data和methods中数据都还不能被访问到 created在实例创建完成之后被立即调用,这时候data和methods中的数据都已经可以被访问和参与运算,不过...
Vue生命周期钩子函数
09-15 410
Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期； Vue生命周期示意图：点击前往 Vue钩子函数官方文档：点击前往 Vue生命周期钩子：又称为Vue生命周期钩子方法/函数，是Vue为开发者提供的方法，我们可以通过这些方法在Vue实例创建、挂载、数据更新、销毁等阶段做一些事情； Vue的生命周期钩子方法： beforeCreate created beforeMou...
浅谈vue中的几个重要的钩子函数。
weixin_33815613的博客
02-14 1002
生命周期 钩子函数 一个组件从创建到销毁的过程就是生命周期。 beforeCreate:创建前 1、当前vue实例化的时候会做一个初始化的操作，在这个生命周期函数里面我们可以做初始化的loading 2、在当前函数里面是访问不到data中的属性，但是可以通过vue的实例对象进行访问 ...
VUE 钩子函数
热门推荐
sinat_37792529的博客
01-12 3万+
“Vue钩子函数就是指在一个Vue实例从创建到销毁的过程自动执行的函数。” 引用知乎SpiritTracks 作者的话 “就是在生命周期执行流程中预留的一个能让我们执行自己代码的地方。叫钩子函数，很形象的，钩子钩子，挂载我们自己的东西” 我感觉说的很道理 那么vue的 钩子函数都有那些呢 一、生命周期钩子函数 　　（1）beforeCreate（） 实例创建前触发 　　（2）created（） 实例创建完成， 　　（3）beforeMo...
vue的钩子函数
qq_40532848的博客
08-03 984
一共有十一个，但是常见的八个，常用的三四个 beforCreate（创建之前） Created（创建之后） beforMount（载入之前） Mounted（载入之后） beforUpdate（更新之前） Updated（更新之后） beforDestroy（销毁之前） Destroyed（销毁之后） activate（keep-alive组件激活时调用） deactivate...
vue生命周期与钩子函数简单示例
12-29
本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net vue生命周期与钩子函数...
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
vue里面关于created和mounted的区别
etemal_bright的博客
11-22 7348
created ：是在页面渲染之前发生的 ，如果想要获取数据渲染到html之后元素的宽高 这些事拿不到的。 mounted：是在渲染data里面的数据到页面上之后 发生的 所以这时候去元素的具体信息是可以拿到的。
Vue钩子函数
songjuntao8的专栏
07-18 801
Vue钩子函数
vue钩子函数
章柏华的博客
02-20 1413
var vm = new Vue({ el:"#box", data:{ msg:'well' }, methods:{ }, created: function () { console.log('实例已经创建'); }, beforeCompile: function () {
vue生命周期简介和钩子函数
01-30 115
转载：http://blog.csdn.net/qq_15766181/article/details/73549933 钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮，也是不行的。组件也是一样，每个阶段它的内部构造是不一样的。所以一般特定的钩子做特定的事，比如ajax获取数据就可以在mounted阶...
vue 的钩子函数
JAN_LIGHT的博客
09-22 497
vue 的生命周期 beforeCreate 实例初始化后 进行数据观测及事件的配置 created 表示实例已经创建完成和被调用 响应式属性和方法已经配置完成（可以拿到data内的数据） 一般在这个函数内进行数据资源的请求–ajax请求 beforeMount 挂载前，确定是否设置el选项（vm.$mount），是否有template选项，若有则渲染template，若没有则渲染外部html mounted 挂载后，可以获取到DOM元素 beforeUpdate 更新前 updated 更新后，依
vue-钩子函数
weixin_43503730的博客
06-23 1912
vue-钩子函数 钩子函数：允许我们定义vue，在特定的时期执行其他事情 vue中的钩子函数包括： 生命周期钩子函数 路由的钩子函数 自定义指令的钩子函数 生命周期的钩子函数 生命周期阶段 3个：加载期、更新期、销毁期 4个：初创期、挂载期、更新期、销毁期 生命周期钩子函数 beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用 created 在实例创建完成后被立即调用 beforeMount 在挂
vue中的钩子函数
sk_yi的博客
08-04 5927
钩子函数 定义 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做**生命周期钩子**的函数，这给了用户在不同阶段添加自己的代码的机会。 生命周期图示 钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在
Vue的钩子函数
qq_48445738的博客
12-21 349
钩子函数类似于回调函数 回调函数 : 让开发者在特定的时候 执行自定义逻辑 vue自定义指令的钩子函数 bind ： 让开发者在将自定义指令绑定到dom元素上时 执行自定义逻辑 inserted ： 让开发者在元素插入dom树的时候 执行自定义逻辑 update ： 让开发者在元素状态发生改变的时候 执行自定义逻辑 Vue.directive("" , { }) vue 的生命周期钩子 ht
Vue里的钩子函数
vision_seven7的博客
08-18 430
Vue里的钩子函数js中的钩子函数jQuery的动画钩子函数vue钩子函数自定义指令的钩子函数vue的生命周期钩子 js中的钩子函数 在js中的钩子函数，相当于回调函数 **回调函数：**让开发者在特定的时候 执行自定义逻辑 //定义主函数，回调函数作为参数 function A(callback) { callback(); console.log('我是主函数'); } //定义回调函数 function B(){ setTimeout("console.lo
vue生命周期和钩子函数
最新发布
09-13
Vue组件的生命周期包括以下阶段和对应的钩子函数： 1. 创建阶段： - `beforeCreate`：在实例被创建之初，数据观测和事件配置之前调用。 - `created`：实例已经创建完成，数据观测和事件配置完成，但尚未挂载到...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值