注意：vue的生命週期函數並不放在methods中！
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
//生命週期函數就是vue實例在某一個時間點會自動執行的函數
var vm = new Vue({
el: "#app",
template: "<div>hello world</div>",
beforeCreate: function() {
console.log("beforeCreate")
},
created: function() {
console.log("created")
},
beforeMount: function() {
console.log(this.$el)
console.log("beforeMount")
},
mounted: function() {
console.log("mounted")
console.log(this.$el)
},
beforeDestroy: function() {
console.log("beforeDestroy")
},
destroyed: function() {
console.log("destroyed")
},
beforeUpdate: function() {
console.log("beforeUpdate")
},
updated: function() {
console.log("updated")
}
});
</script>
</body>
</html>
（在beforeMount的時候是沒有hellow world的，mounted有了。也就是mounted的時候渲染完畢了）
（beforeDestroy、destroyed並沒有被輸出）
而執行$destroy()函數則輸出了：
只有當數據發生改變，beforeUpdate、updated纔會執行：