Vue--使用2 | 易学教程

三十六-四十：组件生命周期钩子函数和图解

<body>
<div id="main">
    <App />
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var Test = {
        data(){
          return{
              msg:'哈哈哈',
          }
        },
        template:`<div id="test">
                    <h3>{{msg}}</h3>
                    <button type="button" @click="clickHandler">修改msg</button>
                </div>
                `,
        methods:{
          clickHandler(){
              this.msg += 'alex'
          }
        },
        //组件创建之前  用的不多
        beforeCreate() {
            //一般不用
            console.log('组件创建前：'+this.msg);   //undefined
        },
        //组件创建之后
        created() {
            //可以操作数据，发送ajax请求，并且可以实现
            //vue对页面的影响 应用：发送ajax请求
            console.log('组件创建后：'+this.msg);   //哈哈哈
        },
        //装载数据到DOM之前  用的不多
        beforeMount() {
            console.log('DOM装载前：'+document.getElementById('app'));  //null
        },
        //装载数据到DOM之后
        mounted() {
            //可以操作DOM
            console.log('DOM装载后：'+document.getElementById('app'));  //<div id="app"><div id="test"></div></div>
        },
        //获取更新之前的DOM
        beforeUpdate() {
            console.log('DOM更新前：'+document.getElementById('test').innerHTML);  //<h3>哈哈哈</h3> <button type="button">修改</button>
        },
        //获取更新之后的DOM
        updated() {
            console.log('DOM更新后：'+document.getElementById('test').innerHTML);  //<h3>哈哈哈alex</h3> <button type="button">修改</button>
        },
        //组件被销毁前   用的不多
        beforeDestroy() {
            console.log('组件销毁前');  //点按钮“创建和销毁”   没有用keep-alive，性能不好
        },
        //组件被销毁后   用的不多
        destroyed() {
            console.log('组件销毁后');   //点按钮“创建和销毁”   没有用keep-alive，性能不好
        },
        //组件被激活后   要用就用这个
        activated() {
            console.log('组件被激活了');  //点按钮“创建和销毁”    用keep-alive，性能好
        },
        //组件被停用后   要用就用这个
        deactivated() {
            console.log('组件被停用了');   //点按钮“创建和销毁”   用keep-alive，性能好
        }
    };
    var App={
        data(){
          return {
              isShow:true,
          }
        },
        //使用keep-alive将DOM缓存，性能好一些
        template:`<div id="app">
                    <keep-alive><Test v-if="isShow" /></keep-alive>
                    <button type="button" @click="isShow=!isShow">创建和销毁</button>
                  </div>`,
        components:{
            Test
        },
    };
    new Vue({
        el: '#main',
        template:'',
        components:{
            App
        }
    });
</script>
</body>
组件的生命周期：
来源：https://www.cnblogs.com/staff/p/11759772.html
标签
vue
test
按钮
app
keep-alive