只需要将引入的vue.js改了就可以了
<!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>VUE——生命周期</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<template id="component">
<div>
<h1 id="title">{{message}}</h1>
<h3>Number: {{num}}</h3>
<p><button @click = "destroy">destroy</button></p>
<input type="text" v-model = "message">
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
// 组件从创建初始到销毁的过程中，经常会需要在某些时刻去执行一些逻辑代码
// Vue在每个组件的生命周期过程(从创建到销毁)中暴露很多的钩子函数，这些钩子函数都会在特定的时候执行
// 组件或者实例生命周期会经历三个阶段：初始化/运行中/销毁
// 1. 当组件或者vue被实例化的时候，代表组件或者vue实例的生命周期开始
// 2. 初始化监听和生命周期
Vue.component('my-component',{
template : '#component',
data () { return { message: 'Hello World', num: 1 } },
methods: {
destroy () {
this.$destroy()
}
},
beforeCreate(){
// 3.执行beforeCreate,此时数据还未挂载，dom也没有渲染，基本没作用
console.log('beforeCreate',this.message,document.querySelector('#title'));
},
// 4. 挂载数据，绑定监听数据等...
created(){
// 5. 执行created,dom没有渲染，可以操作数据，并且不会触发运行中阶段的钩子函数，经常会在这里做数据的初始化挂载
console.log('created',this.message,document.querySelector('#title'));
this.message += '!';
},
// 6.查找组件或者实例的模板，进行编译，编译成虚拟dom结构放入到render函数中
beforeMount(){
// 执行beforeMount 也可以访问数据，操作数据，dom还没有渲染，作用和created一样，做初始数据的获取和挂载
console.log('beforeMount',this.message,document.querySelector('#title'));
this.message += '!';
},
// 7.创建$el,并且执行了render 函数
// render(){
// console.log('render');
// },
mounted(){
// 8.执行mounted dom重新渲染完成，标志初始化阶段完成
console.log('mounted',this.message,document.querySelector('#title'));
document.querySelector('#title').style.color = "red";
document.querySelector('#title').onclick = function () {
console.log('hahahahha')
}
// this.message += '!' // 当数据更改会触发update函数执行
this.timer=setInterval(()=>{
console.log('go');
this.num++;
},500)
},
// 9. 进入运行中阶段，当数据更改的时候
beforeUpdate(){
// 10. 执行beforeUpdate,数据已经更新了，dom还没有重新渲染，没有什么用，不能操作数据(死循环)，dom也没有操作的必要
console.log('beforeUpdate',this.message,document.querySelector('#title').innerHTML);
// this.message += '!'; //更改数据会进入死循环
},
// 11. setter ->watcher ->创建新的dom -> diff对比 -> rerender
updated(){
// 12.执行updated dom重新渲染完成，作用，可以操作重新渲染之后的dom
console.log('updated',this.message,document.querySelector('#title').innerHTML);
},
// 13.当组件被销毁的时候，销毁组件只有一个途径：调用组件的$destory方法，切换组件其实也在销毁组件
beforeDestroy(){
// 14.执行beforeDestory,此时还没有销毁，善后...取消一些时间监听，解绑某些dom事件
console.log('beforeDestory', this.message, document.querySelector('#title'));
clearInterval(this.timer);
document.querySelector('#title').onclick = null;
},
// 15.取消事件所有的监听！数据监听/事件监听...
destroyed(){
// 16.执行destoryed 作用和beforeDestory一样
console.log('destroyed', this.message, document.querySelector('#title'));
}
})
new Vue().$mount('#app')
</script>
</html>