# 初始化
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue-circle-life</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<p id="p">{{msg}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'hi'
},
beforeCreate(){
console.log('beforeCreate')
console.log(this.msg);
console.log(document.getElementById('p')&&document.getElementById('p').innerHTML)
},
created(){
console.log('created')
console.log(this.msg);
console.log(document.getElementById('p')&&document.getElementById('p').innerHTML)
}
})
</script>
</body>
</html>
```
在初始化中，`beforeCreate`生命周期函數中我們發現，獲取不到數據，并且，得到的html內部內容其實就是我們書寫的標簽內容。未被真正的掛載數據，也沒有真正的`html`元素顯示。
`created`生命擊期函數中，我們發現可以獲取到數據，得到的內容還是網頁中書寫的標簽內容，也未被顯示真正的`html`元素。
## 總結
`beforeCreated` 數據訪問不到，并且html還未編譯
`created` 數據可以訪問到，也可以修改，模板還未編譯
# 掛載中
```
var vm = new Vue({
……
beforeMount() {
console.log('beforeMount')
console.log(this.msg);
console.log(document.getElementById('p')&&document.getElementById('p').innerHTML)
},
mounted() {
console.log('mounted')
console.log(this.msg);
console.log(document.getElementById('p')&&document.getElementById('p').innerHTML)
},
})
```
我們可以發現，`beforeMount`時數據也可以訪問到，且此時模板已經編譯完成，不過還未更新到頁面中。
`mounted`，數據也可以訪問，此時已經將編譯的模板更新到頁面中。
# 更新
```
……
beforeUpdate() {
console.log('beforeUpdate')
console.log(this.msg);
console.log(document.getElementById('p')&&document.getElementById('p').innerHTML)
},
updated() {
console.log('updated')
console.log(this.msg);
console.log(document.getElementById('p')&&document.getElementById('p').innerHTML)
},
……
```
發現更新中的生命周期默認是不會執行的，只有當數據發生更改時才會觸發。
`beforeUpdate`生命周期，可以獲取數據，但是頁面中的內容還是舊的內容。
`updated`生命周期，可以獲取數據，頁面的內容已經更新成新的內容了。
# 銷毀
```
……
beforeDestroy() {
console.log('beforeDestroy')
console.log(this.msg);
console.log(document.getElementById('p')&&document.getElementById('p').innerHTML)
},
destroyed(){
console.log('destroyed')
console.log(this.msg);
console.log(document.getElementById('p')&&document.getElementById('p').innerHTML)
}
……
```
實例被銷毀，是要通過`vm.$destroy()`調用才可以。不過，它只不過是實例銷毀，反應銷毀，數據銷毀，但是顯示到頁面中的元素，還依然存在。不過盡可能的不要通過`vm.$destroy()`方法來銷毀。
## 知識點
`this.$el` 可以獲取到Vue 實例使用的根 DOM 元素。可能會顯示到頁面中，也可能還沒有顯示到頁面中。在mounted之前是不會顯示到頁面中的。
