Vue的生命周期函数
2021-09-19 本文已影响0人
游侠war
2019011817295274.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h3 id="h3">{{ msg }}</h3>
<input type="button" value="修改msg" @click="msg='No'" >
</div>
<script>
var vm = new Vue({
el : '#app',
data : {
msg: 'ok',
},
methods: {
show () {
console.log('执行了show方法')
}
},
//初始化阶段
beforeCreate() {
//生命周期函数，表示实例完全创建出来之前，执行函数
//注意：在beforeCreate声明周期函数执行的时候，data 和 methods中的数据都没初始化
// console.log(this.msg);
// this.show();
},
created() {
//生命周期函数，在 create 中，data 和 methods中的数据都初始化好了
//如果要使用 data 和 methods 最早只能在 create 中
// console.log(this.msg);
// this.show();
},
beforeMount() {
//生命周期函数，表示模板已经在内存中编译完成，但是尚未把模板渲染到页面中
//在beforMount执行的时候，页面中的元素还没被真正替换，只是之前写的模板字符串
// console.log(document.getElementById('h3').innerHTML);
},
mounted() {
//生命周期函数，表示内存中的模板已经真实的挂载到页面中，用户已经能看到渲染好的页面了
//注意：mounted是实例创建期间的最后一个生命周期函数，表示实例已经被完全创建好了
//此时如果没有其他操作，这个实例就静静的躺在我们的内存中，一动不动
//如果要通过某些插件操作页面上的 DOM 节点，最早要在 mountrd 中进行
//只要执行完了 mounted 就表示整个 Vue 实例被初始化完毕，此时组件已经脱离了创建阶段，到了运行阶段
// console.log(document.getElementById('h3').innerHTML);
},
//运行阶段
beforeUpdate() {
//生命周期函数，表示我们的界面还没被更新，但是数据已经被更新
//当执行 beforeUpdate 的时候，页面数据还是旧的，但是 data 中的数据是最新的，页面尚未和最新数据同步
// console.log("界面内容：" + document.getElementById('h3').innerHTML);
// console.log("data中的数据：" + this.msg);
},
updated() {
//生命周期函数，updated事件执行的时候，表示页面和data数据已经保持同步了
console.log("界面内容：" + document.getElementById('h3').innerHTML);
console.log("data中的数据：" + this.msg);
},
})
</script>
</body>
</html>
