Vue生命周期的简介

449 阅读3分钟

其实所谓的生命周期就是一个组件创建到销毁的过程,这个过程就是生命周期,也可以理解为组件的生命周期。 因为生命周期分为多个,也为我们提供了更改数据一个各种才操作的简便,我们可以通过挂载前等进行数据的修改等操作。

当然咯,以下内容都是一些理论,个人觉得说的挺明白的,图片的展示 希望你看完理论后再看图片那样更好,图片在最下方哦!!! 创建前: 当前生命周期函数主要做初始化的操作,在当前生命期函数中我们是访问不到data中的属性以及methods中的方法的,也就是说我们所在data中所定义的属性是不能够调用的

created:创建后 1、当前生命周期可以访问data中的属性以及methods中的方法的 2、在当前生命周期的函数中会遍历data和methods中所有的方法和属性,将这些方法和属性代理到vm的实例身上 3、当前生命周期函数会遍历data身上所有的属性,给data中所有的属性添加一个getter/setter=>(get/set)方法,也就是我们通常所说的数据劫持,如果数据拥有了getter/setter方法那么数据发生改变的时候也会触发视图重新渲染。 补充:简单的说我们所说的数据劫持就是你的数据能否在视图上所展示,通常展示的都是被劫持的的数据,当数据没有被劫持的时候我们可以通过强制性刷新的办法进行强制性的劫持 4、一般情况下我们会在当前生命周期函数进行前后端数据的交互

在上述两个生命周期中是没有vue中的el属性的也就是挂载到那个div上的属性

beforeMounted:挂载前 挂载前:数据与页面相结合,但是数据还没有渲染到页面上,在当前生命周期中我们可以对数据进行最后的修改

mounted:挂载后 数据与模板相结合完毕,已经渲染到页面上 当前生命周期我们可以获取到真实的DOM元素 一般的插件实例化的时候我们都会在mounted中去做

补充一点:因为在vue中我们要减少对DOM的操作,所以我们可以通过别的方法来获取DOM元素
定义的时候通过ref给元素绑定一个属性,注定这个属性是唯一的
订阅已完毕后通过this.$refs.属性 进行获取

beforeUpdate:更新前 当data中的数据进行更新的时候当前生命周期就会触发、执行,我们可以在当前生命周期函数中进行数据的最后的修改 更新的数据与模板相结合,但是还未挂载到页面上

update:更新后 数据与模板相结合完毕,以及重新渲染页面 在当前生命周期中我们可以获取到最新的DOM结构

注意:因为只要数据发生改变,当前生命周期就会执行,因此在当前生命周期中进行逻辑操作的时候一定要注意边界条件的判断

beforeDestory:销毁前: 1、当前生命周期中我们可以做事情的解绑,或者是事件的移除等操作 2、一般进行事件的解绑、移除等操作

destoryed:销毁后 断开VM与视图之间的关系