Vue-实例生命周期函数（十四）
2020-06-10 本文已影响0人
小二哥很二
一、什么是vue实例生命周期？
1、什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
2、生命周期函数包括哪些？
1）创建期间的生命周期函数：
NO.1 beforeCreate：表示实例完全被创建出来之前，会先执行它，所以此时vue实例中的data和methods是无法调用的
NO.2 created：在 created中，data和methods 都已经被初始化。如果要调用，最早也只能在created中
NO.3 beforeMount：表示模板el或者template已经在内存中编辑完成，但是尚未把模板渲染到 页面中
NO.4 mounted：表示内存中的模板，已经真实的挂载到页面中，用户已经可以看到渲染好的页面
注意：mounted 是 实例创建期间的最后一个生命周期函数，当执行完此函数，表示，此实例已经完全被创建好了，此时， 如果没有其它操作的话，这个实例，就静静的 躺在内存中一动不动
2）运行期间的生命周期函数：
NO.1 beforeUpdate：这时候表示我们的界面还没有被更新，但是获取到的数据是最新的，只是没渲染到DOM节点
NO.2 updated：该事件执行的时候，页面和data 数据已经保持同步了，都最新的
3）销毁期间的生命周期函数：
NO.1 beforeDestroy：执行此钩子函数的时候，Vue实例已经从运行阶段进入到销毁阶段。所有的data和methods以及过滤器等都处于可用状态，此时，还没有真正执行销毁
NO.2 destroyed：当执行到destroyed函数的时候，组件已经被完全销毁。此时组件的所有内容都已经不可用了
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例生命周期</title>
<script type="text/javascript" src="../VUE/vue.js"></script>
</head>
<body>
<div id="app">
<h3 id="h3">{{message}}</h3>
<input type="button" value="修改message" @click="message='NO'">
</div>
<script>
// 创建 Vue实例，得到ViewModel
const app = new Vue({
el: '#app',
data: {
message: 'I love you'
},
// 1.这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
beforeCreate(){
// 由于vue被创建出来之前先执行本函数，所以这里的this.message打印出来是undefined
console.log('beforeCreate第一个生命周期函数:',this.message)
},
// 2.第二个生命周期函数created
created() {
// 在 created中，data和methods 都已经被初始化
// 如果要调用methods中的方法，或者data里的数据，最早,只能在 created 中 操作
console.log('created初始化data和methods：',this.message)
},
// 3.第三个生命周期，表示模板el或者template已经在内存中编辑完成，但是尚未把模板渲染到 页面中
beforeMount() {
// 在beforeMount执行的时候，页面中的元素，还没有被真正的替换过来，而只是之前写的一些模板字符
console.log('beforeMount挂载之前：',document.getElementById('h3').innerText); //结果：{{message}}
},
// 4.第四个生命周期函数，表示内存中的模板，已经真实的挂载到页面中，用户已经可以看到渲染好的页面
mounted() {
// 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完此函数，表示，此实例已经完全被创建好了，此时， 如果没有其它操作的话，这个实例，就静静的 躺在内存中一动不动
console.log('mounted挂载之后：',document.getElementById('h3').innerText);
},
// 接下来的是运行中的两个事件
// 5.这时候表示我们的界面还没有被更新，但是获取到的数据是最新的，只是没渲染到DOM页面
beforeUpdate() {
console.log('界面上元素的内容：',document.getElementById('h3').innerText);
console.log('data中的msg数据是：',this.message);
// 得出结论： 当执行beforeUpdate的时候，页面中显示的数据还是旧的，data中的数据是最新的
},
// 6.该事件执行的时候，页面和data 数据已经保持同步了，都最新的
updated() {
console.log('up后界面上元素的内容：',document.getElementById('h3').innerText);
console.log('up后data中的msg数据是：',this.message);
},
// 销毁期间的生命周期函数
// 7.执行此钩子函数的时候，Vue实例已经从运行阶段进入到销毁阶段。所有的data和methods以及过滤器等都处于可用状态，此时，还没有真正执行销毁
beforeDestroy() {
console.log('before销毁之前：',this.message);
},
// 8.当执行到destroyed函数的时候，组件已经被完全销毁。此时组件的所有内容都已经不可用了
destroyed() {
console.log('已经被完全销毁：',this.message);
}
})
</script>
</body>
</html>
执行结果
三、图解
image.png
