Vue生命周期

前言

这几年一直在it行业里摸爬滚打,一路走来,不少总结了一些python行业里的高频面试,看到大部分初入行的新鲜血液,还在为各样的面试题答案或收录有各种困难问题

于是乎,我自己开发了一款面试宝典,希望能帮到大家,也希望有更多的Python新人真正加入从事到这个行业里,让python火不只是停留在广告上。

微信小程序搜索:Python面试宝典

或可关注原创个人博客:https://lienze.tech

也可关注微信公众号,不定时发送各类有趣猎奇的技术文章:Python编程学习

生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程

例如:需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM

同时在这个过程中会自动运行一些叫做生命周期钩子的函数,我们可以使用这些函数,在实例的不同阶段加上我们需要的代码,实现特定的功能


注意: 生命周期在未来的脚手架部分,同样有效

<div id="container">
    <p v-html="message"></p>
</div>

为了方便观看生命周期过程中的实例,可以定义如下方法

function showData(process, vm) {
    console.log(process)
    console.log("vue数据:", vm.message) // 当前Vue中的数据
    console.log("Vue挂载el:") // Vue接管的元素
    console.log(vm.$el) 
    console.log("真实Dom:")
    console.log(document.getElementById("container").innerHTML)
    console.log('-----------------')
} // 这个函数用来输出相关信息的

beforeCreate

数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象

beforeCreate: function () {
    showData("创建Vue实例前", this)
},

created

数据已经绑定到了对象实例,但是还没有挂载对象

created: function () {
    showData("创建Vue实例前", this)
},

beforeMount

模板已经编译好了,根据数据和模板已经生成了对应的元素对象,将数据对象关联到了对象的$el属性

$el属性是一个HTMLElement对象

也就是这个阶段,vue实例通过原生的createElement等方法来创建这个html片段,准备注入到我们vue实例指明的el属性所对应的挂载点

beforeMount: function () {
    showData("挂载到Dom前", this)
},

mounted

$el的内容挂载到了el,相当于我们在jQuery执行了$(el).html($el),生成页面上真正的dom

上面我们就会发现页面的元素和我们$el的元素是一致的

在此之后,我们能够用方法来获取到el元素下的dom对象,并进行各种操作

mounted: function () {
    showData("挂载到Dom后", this)
},

beforeUpdate

数据发生变化时调用

beforeUpdate: function () {
    showData("数据发生变化时", this)
},

updated

由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子

updated: function () {
    showData("数据发生变化后", this)
},

beforeDestroy

Vue实例销毁前

beforeDestroy: function () {
    showData("Vue实例销毁前", this)
},

destroyed

Vue实例销毁后

destroyed: function () {
    showData("Vue实例销毁后", this)
}
window.$vm.$destroy()
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李恩泽的技术博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值