yaogengzhu
commented
5 years ago <!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p id="p">{{ msg }}</p>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
beforeCreate(){
// console.log("bfc")
console.log(document.getElementById('p').innerHTML)
// 方法和数据都没有被初始化
console.log('bfe=====' + this.msg + '======' + this.change)
},
created() {
// console.log('cre')
console.log(document.getElementById('p').innerHTML)
// 方法和数据已经被初始化
console.log('bfe=====' + this.msg + '======' + this.change)
this.msg = '您好'
},
beforeMount(){
// 数据已经被初始化，但是页面还是旧的数据，没有及时渲染
console.log(document.getElementById('p').innerHTML)
console.log('bfe=====' + this.msg + '======' + this.change)
},
mounted(){
// 数据已经被初始化，且渲染到页面中去了
console.log(document.getElementById('p').innerHTML)
console.log('bfe=====' + this.msg + '======' + this.change)
},
methods: {
change(){
}
}
})
</script>
</body>
</html>
组件开始创建期间的四个生命周期函数
beforeCreated 第一个生命周期函数，表示实例w完全被创建出来之前，会执行它。 在before执行的时候，vm实例上的
data和methods都没有被初始化。created 第二个生命周期函数，
data和method已经都被初始化。如果要操作两者的数据，最早需要在created中去执行。开始编译模版
在beforeMount 执行的时候，页面中的元素还没有真正的被替换出来，页面还是旧的