浅谈vue中的几个重要的钩子函数

た 入场券 2023-06-08 12:00 28阅读 0赞

生命周期 钩子函数

一个组件从创建到销毁的过程就是生命周期。

beforeCreate:创建前

1、当前vue实例化的时候会做一个初始化的操作，在这个生命周期函数里面我们可以做初始化的loading

2、在当前函数里面是访问不到data中的属性，但是可以通过vue的实例对象进行访问

created:创建后

1、当beforeCreate执行完毕以后，会执行created. 在当前函数中我们可以访问到data中的属性

2、当前生命周期函数执行的时候会将data中所以的属性和methods身上所以的方法添加到vue的实例身上，同时

会将data中所有的属性添加一个getter/setter方法

3、如果需要进行前后端上数据交互(ajax请求的时候) 需要在当前生命周期中使用

beforeMount:挂载前

(渲染)

render函数初次被调用——>数据和模板没有进行相结合，同时还没有渲染到html页面上

可以在此做渲染前data中数据最后的修改

mounted:挂载后

1、数据和模板进行相结合，渲染成真实的DOM结构

2、在当前生命周期函数里面我们可以访问到真实的DOM结构,

3、在vue中我们可以通过$refs来访问到真实的DOM结构

4、ref类似与id一样 值必须是唯一的 访问的时候我们可以通过this.$refs.属性

beforeDestroy:销毁前

销毁之前还可以访问到DOM结构 以及相关的数据(data)

在这个生命周期函数中我们可以将绑定的事件进行移除

destroyed:销毁后

在这个生命周期函数中会将数据和模板之间的关系断开(不是你的做的)

在这个生命周期函数中我们还是可以访问到data中的属性

但是访问不到真实的DOM结构了

beforeUpdate:更新前

只要data中的属性发生了改变，那么这个生命周期就会执行，render函数再次会执行

在这个生命周期函数中我们可以对数据进行最后的修改，同时也可以访问到最新的DOM结构和数据

updated:更新后

在当前生命周期函数中我们可以访问到最新的DOM结构(数据更新后最新的DOM结构)和数据

format_png

发表评论

表情：
评论列表 （有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Java -- 浅谈API几个常用的类

    Java有一个API手册，建议先看1.6或者1.8版本的，虽然有很多已经过时了，但是相对来说比较稳定，更有利于新手的学习和日常操作的使用，不建议一味地追求新版本，稳定最重要！

    野性酷女野性酷女/ 0 赞/ 105 阅读

    相关 vue中钩子函数

    简单来说钩子函数是在系统消息触发时被系统调用的函数。不能自己触发。 vue的生命周期函数都是钩子函数 创建：异步请求适宜在created()调用 before

    青旅半醒青旅半醒/ 0 赞/ 84 阅读

    相关 vue钩子函数

    `vue`钩子函数 > 虽然文档已经很详细啦，但是总结一下加深一下理解与记忆（以官方文档为参考整理的~） 1. 路由导航守卫 > 有时候，我们需要通过路由来进行一

    水深无声水深无声/ 0 赞/ 166 阅读

    相关 Vue中的路由钩子函数

    在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。 定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。 总体来

    今天药忘吃喽~今天药忘吃喽~/ 0 赞/ 263 阅读