前言
这几年一直在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()