1. beforeCreate() data 和 methods 都沒有初始化
2. created() data 和 methods 有初始化
3. beforeMount() 模板已經編譯好在記憶體，但尚未把模板渲染到頁面
4. mounted() 模板已經渲染到頁面
5. beforeUpdate() 當data 發生改變觸發, 當執行該函式時，頁面顯示的資料還是舊的，此時data資料是最新的，尚未和頁面資料同步
<!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"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<script>
var vm=new Vue({
el:'#app',
data:{},
methods:{},
//data 和 methods 都沒有初始化
beforeCreate() {
},
//data 和 methods 有初始化
created() {
},
//模板已經編譯好在記憶體，但尚未把模板渲染到頁面
beforeMount() {
},
//模板已經渲染到頁面
mounted() {
},
//當data 發生改變觸發, 當執行該函式時，頁面顯示的資料還是舊的，此時data資料是最新的，尚未和頁面資料同步
beforeUpdate() {
},
updated() {
},
//示例銷燬
beforeDestroy() {
},
});
Vue.config.devtools = true
</script>
</body>
</html>