vue基础（5）、生命周期的钩子函数

使用示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue测试</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="d1">
    <!--父组件向子组件传递is_show参数-->

    <!--内置组件，将子组件缓存起来，减少销毁和创建的损耗-->
    <keep-alive>
         <App v-if="isShow"></App>
    </keep-alive>
    <button @click="display">点我</button>
</div>

</body>

<script>
    var App={
        data(){
          return{
            msg:'app',
          }
        },
        template:'' +
        '<div id="app" @click="change_btn">' +
            '<h1>APP</h1>'+
            '<span>{{msg}}</span>' +
        '</div>',

        methods:{
           change_btn:function () {
              this.msg='alex'
          },
        },

        beforeCreate(){
            // 当前组件创建前
            console.log('------------------------');
            console.log('创建前....');
          // console.log(this.msg)  // undefined
        },

        created(){
            // 组件创建后,可以操作数据，发送ajax请求
          console.log('创建成功！！...');
          // console.log(document.getElementById('app'))

        },

        beforeMount(){
            // 装载数据到DOM之前调用
          // console.log('beforeMount....')
          //   console.log(document.getElementById('app'))
        },

        mounted(){
            // 组件已经被渲染成DOM标签,可以直接操作DOM元素
          // console.log('mounted....');
          //   console.log(document.getElementById('app'))
        },

        beforeUpdate(){
            // 更新之前被调用，获取原始DOM
            // console.log('beforeUpdate....');
            // console.log(document.getElementById('app').innerHTML);
        },

        updated(){
            // 更新之后，获取最新的DOM
            // console.log('updated....');
            // console.log(document.getElementById('app'));
        },

        beforeDestroy(){
            console.log('销毁前....')

        },
        destroyed(){
            // 销毁后
            console.log('销毁....')
        },

        activated(){
            console.log('组件被激活！')
        },

        deactivated(){
            console.log('组件被停用了！')
        }
    };

    new Vue({
        el: '#d1', // 绑定根元素

        data:{
            isShow:true
        },
        methods:{
            display:function () {
              if(this.isShow){
                  this.isShow=false
              }
              else {
                  this.isShow=true
              }
            }
        },
        components:{
            App:App
        },
    });
</script>
</html>
vue基础（5）、生命周期的钩子函数

使用示例

生命周期图示

猜你喜欢
