Vue入门（6）生命周期

<div id="app">
	<App></App>
</div>
<script>
       Vue.component("Tset",{
           data(){
               return {
                   msg : "hello"
               }
           },
           template : `
               <div>
                   <h3>{{msg}}</h3>
                   <button @click="changeHanlder"></button>
               </div>
           `,
           methods : {
               changeHanlder(){
                   this.msg = this.msg + "哈哈哈😄"
               }
           },
           beforeCreate : function(){
               //组件创建之前
               console.log(this.msg);//undefined
           },
           created : function(){
               console.log(this.msg);//hello
               //组件创建之后，使用该组件，就会调用created方法
               //created方法中可以操作后端的数据，数据驱动视图
               //应用：发起ajax请求
           },
           beforeMount : function(){
               //挂载数据到dom之前调用
               console.log(document.getElementById("app"));
           },
           mounted : function(){
               //挂载数据到dom之后调用
               //应用：操作dom
               console.log(document.getElementById("app"));
           },
           beforeUpdate : function(){
               //更新dom之前调用，应用：获取原始dom
               console.log(document.getElementById("app").innerHTML);
               //<div class="app"><div><h3>hello</h3> <button></button></div></div>
           },
           updated : function(){
               //更新dom之后调用，应用：获取最新的dom
               console.log(document.getElementById("app").innerHTML);
               //<div class="app"><div><h3>hello哈哈哈😄</h3> <button></button></div></div>
           },
           beforeDestroy : function(){
               //实例销毁之前调用。在这一步，实例仍然完全可用。
               console.log("beforeDestroy");
           },
           destroyed : function(){
               //Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
               console.log("destroyed");
           },
           activated :function(){
               //keep-alive 组件激活时调用。
               console.log("组件被激活了");
           },
           deactivated :function(){
               //keep-alive 组件停用时调用。
               console.log("组件停用了了");
           }
       })

       var App = {
           data(){
               return {
                   isShow : true
               }
           },
           //vue内置组件<keep-alive></keep-alive>能在组件的切换过程中将状态保留在内存中
           //防止重复渲染dom
           template : `
               <div class="app">
                   <keep-alive>
                       <Tset v-if="isShow"/>
                   </keep-alive>   
                   <button @click="isShow=!isShow">改变生死</button>
               </div>
           `
       }

       new Vue({
           el: '#app',
           data: {
               
           },
           components : {
               App
           }
       })
</script>