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

vue钩子函数(vue钩子函数和生命周期)div id navCategory div Vue 实例有一个完整的生命周期 也就是从开始创建 初始化数据 编译模板 挂载 渲染 更新 渲染 卸载等一系列过程 我们称这是 Vue 的生命周期 通俗说就是 Vue 实例从创建到销毁的过程 就是生命周期 在 Vue 的整个生命周期中 它提供了一系列的事件

大家好,我是讯享网,很高兴认识大家。



 <div id="navCategory"></div> 

讯享网

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

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

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

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

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

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

在官网上拿了张图:


讯享网

beforeCreate&nbsp; — vue实例&quot;创建前&quot; ,注意:在这个函数中,vue中data数据中心的数据,它是读不到的。

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

查看结果:

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

在视图层渲染标签:

dom挂载前输出结果:

查看输出结果:

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

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

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

&nbsp;

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

小讯
上一篇 2025-04-24 21:03
下一篇 2025-05-25 22:05

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/147570.html