🌵 作者主页:仙女不下凡-前端萌新
🌵 前言介绍:以下👇 内容都是我个人对于前端知识的总结,会定期更新欢迎持续关注!
🌵 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!
💜第一章 单组件生命周期💜
💛一、生命周期💛
1.什么是生命周期
🌼生命周期:是一个Vue
实例1从创建到销毁的整个过程,Vue
实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom
=> 渲染、更新 => 渲染、卸载 等⼀系列过程,Vue
组件2也可以看成一个Vue
实例。
㊙️链接:Vue
组件与Vue
实例的区别需要充分了解。
2.生命周期函数(钩子)-Vue2.0
🌼在生命周期中,特定的时间点会被自动执行的函数。
🌼beforeCreate
创建前 :数据观测和初始化事件还未开始,此时data
的响应式追踪、event/watcher
都还没有被设置,也就是说不能访问到data
、computed
、watch
、methods
上的方法和数据。
🌼created
创建后:实例创建完成,实例上配置的options
包括data
、computed
、watch
、methods
等都配置完成,但是此时渲染得节点还未挂载到DOM
,所以不能访问到$el
属性。
🌼beforeMount
挂载前:在挂载开始之前被调用,相关的render
函数首次被调用。实例已完成以下的配置:编译模板,把data
里面的数据和模板生成html。此时还没有挂载htm
l到页面上。
🌼mounted
挂载后:在el
被新创建的vm.$el
替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html
内容替换el
属性指向的DOM
对象。完成模板中的html
渲染到html
页面中。此过程中进行ajax
交互。
🌼beforeUpdate
更新前:响应式数据更新时调用,此时虽然响应式数据更新了,但是对应的真实DOM
还没有被渲染。
🌼updated
更新后 :在由于数据更改导致的虚拟DOM
重新渲染和打补丁之后调用。此时DOM
已经根据响应式数据的变化更新了。调用时,组件DOM
已经更新,所以可以执行依赖于DOM
的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
🌼beforeDestroy
销毁前:例销毁之前调用。这一步,实例仍然完全可用,this
仍能获取到实例。
🌼destroyed
销毁后:实例销毁后调用,调用后,Vue
实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。
🌼另外还有keep-alive
独有的生命周期,分别为activated
和deactivated
。用keep-alive
包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行deactivated
钩子函数,命中缓存渲染后会执行activated
钩子函数。
🌼该Vue
实例代码没有采用脚手架结构,通过执行该段代码可以更加清晰了解,生命周期在实际开发中的应用、对数据结构、对页面的影响。
/示例代码 .html页面-此处为Vue实例/
<body>
<div id="root">
<h2>欢迎学习Vue</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
var myVue=new Vue({
el:"#root",
data:{
data:"你好",
info:"vue"
},
beforeCreate:function(){
console.log("创建前========")
console.log(this.data)
console.log(this.$el)
},
created:function(){
console.log("已创建========常用, 实例出现在内存中时调用")
console.log(this.info)
console.log(this.$el)
},
beforeMount:function(){
console.log("挂载前========")
console.log(this.info)
console.log(this.$el)
},
mounted:function(){
console.log("挂载完成========常用, 实例出现在页面中时调用")
console.log(this.info)
console.log(this.$el)
},
beforeUpdate:function(){console.log("更新前========");},
updated:function(){console.log("更新完成========常用, 实例更新时调用");},
beforeDestroy:function(){
console.log("销毁前========")
console.log(this.info)
console.log(this.$el)
},
destroyed:function(){
console.log("已销毁========常用, 实例消亡时调用")
console.log(this.info)
console.log(this.$el)
}
})
</script>
第二章 父子组件生命周期
第三章 多组件生命周期
keep-alive生命周期与Vue3.0相关生命周期在9月中旬之前更新,请持续关注…