vue开发教程13：组件创建及组的生命周期函数

扫描下面的二维码，“关注”我的百家号。

前面我们介绍过根组件App.vue，本章我们要介绍非根组件。我们项目的代码编写一般就是在这些非根组件中进行的。接下来我们就来介绍如何创建这类组件，以及组件的生命周期函数。

一：创建组件。

1：在src目录下创建一个components组件目录。

2：再在components组件目录下创建一个home.vue组件。

vue组件的后缀名是vue，home组件的代码跟根组件的代码组成类似，代码如下：

<template>

   <div>

        我是home页面 -- {{msg}}

   </div>

</template>

<script>

export default {

  data(){

        return{

              msg:'我是home页面',

        }

  }

}

</script>

<style lang="scss">     </style>

我们可以在components目录下创建自己想要实现的任何组件。

3：在根组件中引用home组件

第一步：引入home组件文件：

import home from “./components/home.vue”;

第二步：挂载声明home组件：

components:{

‘v-home’:home,

}

第三步：使用home组件：

<v-home></v-home>

app.vue完整代码如下：

<template>

  <div>

    <v-home></v-home>  使用home组件

  </div>

</template>

<script>

import home from "./components/home.vue"; //引入组件文件

export default {

  data(){  },

  components:{  //挂载声明组件

    'v-home':home,

  }

}

</script>

<style ></style>

二：组件的生命周期函数。

生命周期函数/生命周期钩子：    组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法  这些方法就叫做生命周期函数。

export default{

    data(){        return{   }    },

    beforeCreate(){ //组件创建前函数

        console.log('实例刚刚被创建1');

    },

    created(){ //组件创建后

        console.log('实例已经创建完成2');

    },

    beforeMount(){ //组件挂载前

        console.log('模板编译挂载之前3');

    },

    mounted(){     /*组件挂载后函数。请求数据，操作dom , 放在这个里面*/

        console.log('模板编译挂载完成4');

    },

    beforeUpdate(){ //组件更新前函数

        console.log('数据更新之前');

    },

    updated(){ //组件更新后

        console.log('数据更新完毕');

    },

    beforeDestroy(){   /*组件销毁前函数。*/

        console.log('实例销毁之前');

    },

    destroyed(){ //组件销毁后

        console.log('实例销毁完成');

    }

}

组件的生命周期函数在vue开发过程是非常用的，如：mounted组件挂载完成后函数我们就会经常用到它。所以，这些周期函数，我们要熟练掌握它们。