Vue的生命周期

<div id="app">
    <button @click="name+='*';age+=1">修改数据</button>
    <button @click="over">销毁Vue实例</button>
    <h2>{{name}}</h2>
    <h2>{{age}}</h2>
</div>

let vm = new Vue({
    // el选项可以通过$mount代替
    // el:'#app',
    // 如果有template选项，Vue会将template作为模板进行渲染，并将渲染之后的内容挂载到指定的容器中
    // 如果没有template选项，Vue就会将el里面的所有内容当做模板来渲染，并将渲染之后的内容挂载到指定的容器中
    /* template:`
    	<div>
        	<p>{{name}}</p>
            <p>{{age}}</p>
        </div>`, */
    data:{
        name:'张三',
        age:20
    },
    methods: {
        over(){
            // $destroy()方法，用于销毁当前Vue实例
            // 注意：销毁当前Vue实例，不是删除这个对象，而且这个对象再也不具备响应式页面的能力了。
            this.$destroy()
        }
    },
    // 数据初始化之前
    beforeCreate() {
        console.log('beforeCreate:',this.name,this.age);
    },
    // 数据初始化完成
    created() {
        console.log('created:',this.name,this.age);
    },
    // 页面挂载之前，此时页面是模板
    beforeMount() {
        // 通过$el返回Vue实例使用的根 DOM 元素
        console.log(this.$el);
        console.log('beforeMount');
    },
    // 页面挂载完成，此时页面已经渲染完成
    mounted() {
        console.log(this.$el);
        console.log('mounted');
    },
    // 数据更新之前
    beforeUpdate() {
        // 在这个阶段，数据已经发生了变化，但是页面还没有重新渲染
        console.log('beforeUpdate',this.name,this.age);
    },
    // 数据更新完成
    updated() {
        // 在这个阶段，页面会重新渲染
        console.log('updated',this.name,this.age);
    },
    // 销毁之前
    beforeDestroy() {
        // 我们通常会在这个生命周期函数中做一些收尾的工作
        // 比如：停掉开启的定时器，初始化一些数据等等。
        console.log('beforeDestroy');
    },
    // 销毁完成
    destroyed() {
        console.log('destroyed');
        console.log(this);
    },
})

setTimeout(() => {
    // 通过$mount方法，给vm指定一个容器
    // 这种写法的好处是，可以控制何时挂载页面
    vm.$mount('#app')
}, 1000);