首页专栏前端文章详情

Vue生命周期的理解

白昼发布于 5 月 9 日

什么是Vue生命周期？

vue实例从创建阶段到销毁阶段的全部过程，就是生命周期。具体来说，就是从开始创建实例、到初始化数据、编译模板、将实例挂载到Dom → 渲染页面、数据更新 → 渲染页面、最后销毁的一系列过程，就称之为Vue的生命周期

Vue生命周期的作用？

Vue生命周期中有很多个叫做生命周期钩子的函数，让我们在控制整个Vue实例的过程中更容易形成一个清晰的逻辑，我们当然可以在这些函数里添加代码，这就让这段代码与钩子有了关联，关联就是挂载的意思，挂载就是在钩子函数上挂了一个逻辑代码，一个任务的意思

例如：

var vm = new Vue({ el: '#app', data: { message: '实例挂载完成' }, mounted: function () { console.log(this.message) }, updated() { console.log(this.message); } }) vm.$watch('message', function (newValue, oldValue) { console.log(`初始值:${oldValue}`); console.log(`更新后的值:${newValue}`); })

关于钩子函数的this 它的this指向的是调用它的实例在此例子中指vm

如果用箭头函数的写法 : mounted: () => console.log(this.message),会打印undefined 原因箭头函数没有 this，this被当成了变量

效果：

Vue生命周期总共有几个阶段？

生命周期一共分为8个不同的阶段：创建前 beforeCreate/后 created、挂载(渲染页面)前 beforeMount/后 mounted、更新前 beforeUpdate/后 updated、销毁前 beforeDestory/后 destoryed

各阶段的详细说明
beforeCreate 实例初始化时就开始调用，这个阶段事件，数据观测还未初始化

created 在实例创建完成之后开始调用这个阶段事件，数据观测初始化完成，但还没有把实例挂载到Dom上

beforeMount 在mount之前运行

mounted 实例挂载到Dom完成渲染页面所有指令开始生效数据发生变化可触发DOM更新

beforeUpdate 每次实例发生改变（data改变）都会调用该钩子，但页面还未改变

updated 此阶段页面重新渲染

beforeDestroy 开始销毁实例时调用此刻实例依然有效

destroyed 实例被销毁之后开始调用所有指令、绑定DOM等都会失效

created和mounted的区别

created阶段视图中的html还没有渲染出来
如果想在此时去对html的dom节点进行操作一定无法找到元素
所以想要进行DOM操作要在mounted函数里进行

当第一次页面加载会触发哪些钩子？

在第一次加载时会触发 beforeCreate、created、beforeMount、mounted 这4个钩子函数

vue.js 前端

阅读 18 发布于 5 月 9 日

赞收藏

本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议

白昼

1 声望

0 粉丝

关注作者

0 条评论

得票数最新

提交评论

你知道吗？

注册登录

白昼

1 声望

0 粉丝

关注作者

宣传栏

什么是Vue生命周期？

Vue生命周期的作用？

例如：

var vm = new Vue({ el: '#app', data: { message: '实例挂载完成' }, mounted: function () { console.log(this.message) }, updated() { console.log(this.message); } }) vm.$watch('message', function (newValue, oldValue) { console.log(`初始值:${oldValue}`); console.log(`更新后的值:${newValue}`); })