当前位置:网站首页 > Vue.js开发 > 正文

vue钩子函数(vue钩子函数和生命周期)



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

在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 方法,可以让我们用自己注册的 js 方法控制整个大局,在这些事件响应方法中的 直接指向的是 的实例。

生命周期函数,又叫钩子函数(生命周期钩子===生命周期函数===生命周期事件)

vue 中的生命周期函数,一般都是 成对出现。所以我们成对比较一下,他们的区别。

10 个生命周期函数 牢记!具体使用!

特点:自动调用的,只是他们的调用的时间节点 有 先 有 后。

在官网上拿了张图:

beforeCreate --- vue实例"创建前" ,注意:在这个函数中,vue中data数据中心的数据,它是读不到的。

输出数据中心的 name 是读不到的:

查看结果:

挂载之前      this.$el---此时的$el为“虚拟的”DOM节点

在视图层渲染标签:

dom挂载前输出结果:

查看输出结果:

  • --- 数据更新之前(----视图层中的数据的前后变化)
  • --- 数据更新之后(----视图层中的数据的前后变化)

在视图层通过 点击让 num 的数值发生改变来模拟数据更新,查看结果:

此时数据无变化时,在控制台是看不到效果的,当我们点击按钮后:

到此这篇关于vue中的生命周期及钩子函数的文章就介绍到这了,更多相关vue中的生命周期钩子函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

到此这篇vue钩子函数(vue钩子函数和生命周期)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • Redhat9.4安装(redhat9安装教程)2026-04-10 13:54:07
  • 字符串转map集合(map字符串转json)2026-04-10 13:54:07
  • vue钩子函数和生命周期(vue钩子函数有哪些含义)2026-04-10 13:54:07
  • 前端跨域解决方案cors(前端跨域解决方案vue)2026-04-10 13:54:07
  • js如何深拷贝一个function(js如何深拷贝一个对象)2026-04-10 13:54:07
  • can通讯故障怎么解决(can通讯故障522083.19)2026-04-10 13:54:07
  • map转json字符串 /u0000(map转json字符串 空没有字段)2026-04-10 13:54:07
  • swagger2的作用(swagger 2.0)2026-04-10 13:54:07
  • vue下载安装教程(vue 安装)2026-04-10 13:54:07
  • ettercap怎么用(ettercap 0.8.3教程)2026-04-10 13:54:07
  • 全屏图片