一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 修改代码

要修改的文件
├── src
│ ├── App.vue
│ ├── components
│ │ ├── Header.vue
│ │ ├── Home.vue
│ │ └── Lify.vue

App.vue

<template>
  <div id="app">
<v-home></v-home>
<hr>
  </div>
</template>

<script>
/*
import components
Local Registration components
use in template
*/

import Home from './components/Home.vue';

export default {
  name: "app",
  data() {
    return {
      msg:'hello vue world!',     
    };
  },
  components:{
    'v-home':Home
  },
  mounted(){
    console.log("i an a life  Cycle function ")
  }
};
</script>

<style>
</style>

Header.vue

<template>
    <div class="header">
        {{msg}}
    </div>
</template>

<script>
export default {
    data(){
        return {
            msg:'this is a head component'
        }
    },
    methods :{
        
    }
}
</script>

<style>
.header{
    background:#000;
    color: #fff;
}
</style>

Home.vue

<template>
    <!-- all content need in root-->
    <div id="home">
        <v-header></v-header>
        <h2>{{msg}}</h2>
        <br>
        <hr>
        <v-life  v-if="!flag"></v-life>
        <br>
        <hr>
        <button @click="flag=!flag">switch mount or destroy Lify components</button>
    </div>
</template>



<script>
import Header from './Header.vue'
import Life   from './Lify.vue'

export default {
    data(){
        return {
            msg:'i am home component!',
            flag: true
        }
    },
    methods :{
    },
    components:{
        'v-header':Header,
        'v-life': Life
    }
}
</script>

<style>

#home h2{
    color: red;
}
</style>

Lify.vue

<template>
    <!-- all content need in root-->
    <div id="home">
        <h2>this is a life Cycle show: -- {{msg}} </h2>       

        <button>run and change msg</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            msg:'i am a life Cycle component.'
        }
    },
    methods:{
        setMsg(){
            this.msg = 'i am the data after change!'
        }
    },
    beforeCreate(){
        console.log('before Instance create 1');
    },
    created(){
        console.log('after Instance create 2');
    },
    beforeMount(){
        console.log('before template Compile 3');
    },
    mounted(){//you can request data, Operat dom in mounted
        console.log('after template Compile 4');
    },
    beforeUpdate(){
        console.log('before data update 5');
    },
    updated(){
        console.log('after data update 6');
    },
    beforeDestroy(){//you can save data before destroy
        console.log('before Instance destroy 7');
    },
    destroyed(){
        console.log('after Instance destroy 8')
    }
}
</script>

五 运行

npm run dev

image.png

六 总结

1 温习控件的生命周期及钩子函数

七 参考

https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90 《实例生命周期钩子》