• 技术文章 >web前端 >js教程

    vue.js中有多少钩子函数

    coldplay.xixicoldplay.xixi2020-11-30 14:00:00原创1459

    vue.js中有八个钩子函数,分别是:1、beforeCreate用于创建前;2、created用于创建后;3、beforeMount用于挂载前;4、mounted用于挂载后;5、beforeDestroy用于销毁前。

    本教程操作环境:windows7系统、Vue2.9.6版,该方法适用于所有品牌电脑。

    vue.js中有八个钩子函数,分别是:

    一、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结构)和数据

    相关学习推荐:javascript视频教程

    以上就是vue.js中有多少钩子函数的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:vue.js 钩子函数
    上一篇:对MongoDB的认识及操作 下一篇:如何安装vue.cli脚手架
    PHP编程就业班

    相关文章推荐

    • 使用beforeEnter钩子函数(附代码)• 在Vue2.X中使用路由和钩子函数• vue生命周期钩子钩子函数的介绍(附示例)• 钩子函数是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网