美文网首页
vue生命周期函数

vue生命周期函数

作者: 恋上梨泰院小绅士 | 来源:发表于2021-02-20 14:19 被阅读0次
hook

1、create

beforeCreate:el 和 data 并未初始化,在当前函数里面是访问不到data中的属性,但是可以通过vue的实例对象进行访问

created: 完成了 data 数据的初始化,在当前函数中我们可以访问到data中的属性,当前生命周期函数执行的时候会将data中所以的属性和methods身上所以的方法添加到vue的实例身上,同时会将data中所有的属性添加一个getter/setter方法

2、mount

beforeMount:挂载前,render函数初次被调用,数据和模板没有进行相结合,同时还没有渲染到html页面上,可以在此做渲染前data中数据最后的修改

mounted:完成挂载,数据和模板进行相结合,渲染成真实的DOM结构,在当前生命周期函数里面我们可以访问到真实的DOM结构。

3、update

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

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

4、destroy

beforeDestroy:销毁之前还可以访问到DOM结构  以及相关的数据(data),在这个生命周期函数中我们可以将绑定的事件进行移除

destroyed:在这个生命周期函数中会将数据和模板之间的关系会断开,在这个生命周期函数中我们还是可以访问到data中的属性,但是访问不到真实的DOM结构了

5、active (当keep-alive 缓存组件才会有的生命周期的钩子函数)

actived: 当缓存组件有被显示出来时

deactivated: 当缓存的组件隐藏时,会触发这个钩子函数

errorCaptured:当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串

详解

相关文章

  • Vue学习笔记(12)-生命周期函数

    生命周期函数 生命周期函数代表的是Vue实例,或者是Vue组件,在网页中各个生命阶段所执行的函数。生命周期函数可以...

  • 😄--前端面试整理--VueJs

    1、Vue的指令都有哪些? 2、Vue的生命周期函数 3、除了生命周期函数还有哪些钩子函数 4、Vue组件是怎么进...

  • vue生命周期

    学习vue的生命周期 什么是生命周期函数? vue的生命周期函数(又称为钩子函数)是一个vue实例从开始创建,到初...

  • Vue生命周期函数调用的时间

    vue的生命周期函数有11个,常用的8个生命周期函数必须要掌握

  • vue基础知识精讲

    一、Vue实例生命周期函数 生命周期函数是vue实例在某一个时间点会自动执行的函数。 测试一下: 二、Vue的模板...

  • 了解vue.js的生命周期函数

    了解vue的生命周期函数和运行中事件,有助于我们更好地使用vue 具体代码文件 四个生命周期函数 beforeCr...

  • Vue生命周期

    Vue生命周期详解 一、Vue生命周期 与 作用 (生命周期钩子就是生命周期函数) (1)Vue生命周期:每个Vu...

  • Vue 生命周期

    生命周期函数 生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数 简单来说就是,钩子(生命周期函数)就好...

  • vue的生命周期

    了解vue的生命周期函数和运行中事件,有助于我们更好地使用vue 四个周期函数: beforeCreate :第一...

  • vue.js 生命周期

    Vue实例 生命周期函数流程 —— beforeCreate、created、beforeMount、mounte...

网友评论

      本文标题:vue生命周期函数

      本文链接:https://www.haomeiwen.com/subject/bdgtfltx.html