前沿:
通过前面几节的学习,我们已经对vue有了初步的了解,大致了解了vue可以帮我们干什么,
那么接下来我们就来看看vue的生命周期和它常用的钩子函数,
1. 理解生命周期的含义
生命周期:就是一个组件从实例化创建并添加到DOM树开始 ,一直到组件被销毁的整个过程 。
生命周期函数(钩子函数): 就是在Vue生命周期的整个过程的不同阶段被调用的函数
2. 生命周期图
首先来看一下官网对于vue生命周期的图解, 官网上目前有8个生命周期函数,
还有两个我们之后再看. 先看看基本的8个钩子函数
3. 钩子函数的理解
通过打断点的方式,让我们好好理解生命周期的钩子函数, 你们也可以自己复制代码进行测试好好理解Vue的钩子函数
<script>
new Vue({
el: "#app",
data:{
},
methods:{
},
// 1. 在实例化之前被调用
beforCreate: function(){
// 这个方法的时候data还没有加载,所以此方法用不到
// 一般不会在这里处理什么事情
alert("组件实例化之前执行的函数");
debugger;
},
// 2. 实例化初始之后,被添加到DOM元素之前触发
created: function(){
// 可以在这里发送ajax,初始化操作
alert("组件实例化完毕,但页面还未显示");
debugger;
},
// 3. 在元素(虚拟DOM)已经准备好被添加到DOM,但是还没有添加时触发
beforeMount: function(){
// 要保证有el,或者vm.$mount() 否则这里不会执行
alert("组件挂载前,但页面还未显示,但是虚拟DOM已经配置");
debugger;
},
// 4. 会在元素创建后触发
mounted: function(){
// 如果有template属性模板,会用模板替换外部的el,只要有此属性,直接卸载外部el找中的内
// 这将没有任何意义了
// template只能有一个更元素,不能是文本节点,
// 真实的dom渲染完了,可以操作dom了
alert("组件挂载后,此方法执行后,页面显示");
debugger;
},
// 5. 在数据更新将要对DOM做一些修改时触发
beforeUpdate: function(){
// 当页面依赖的数据发生变化时才执行,一般用watch来替换,这个方法不好用
// 页面依赖的数据发生变化,数据已变化,页面还没有渲染
alert("组件更新前,但页面还未显示,但是虚拟DOM已经配置");
debugger;
},
// 6. 后在DOM的更新已经完成后触发
updated: function(){
// 重新渲染页面后执行, 可以操作DOM了
alert("组件更新后,此方法执行后,页面显示");
debugger;
},
// 7. 在组件即将被销毁并且从DOM上移出时触发
beforeDestroy: function(){
//没什么意义,死了就什么都干不了了
alert("组件销毁前");
debugger