vue前端开发自学,组件的生命周期函数介绍001

vue前端开发自学,组件的生命周期函数介绍001！今天介绍一下，组件自身的生命周期函数。又叫做，钩子函数。可以借助于这些钩子函数，实现很多我们预想的效果。比如，在组件渲染 之前，就做一些特殊的操作等等。

<template>
  <h3>组件的生命周期函数介绍1</h3>
  <p>{{ message }}</p>
  <button @click="updateHandle">修改文本内容</button>
</template>
<script>
  export default{
    /**
     * 创建期，
     *  beforeCreate,created
     * 渲染期，
     *  beforeMount,mounted
     * 更新期，
     *  beforeUpdate,updated
     * 销毁期，
     *  beforeUnmount,unmounted
     */
    beforeCreate(){
      console.log("组件创建之前");
    },
    created(){
      console.log("组件创建之后");
    },
    beforeMount(){
      console.log("组件渲染之前");
    },
    mounted(){
      console.log("组件渲染之后");
    },
    beforeUpdate(){
      console.log("组件更新内容之前");
    },
    updated(){
      console.log("组件更新内容之后");
    },
    data(){
      return {
        message:"组件原始数据"
      }
    },
    methods:{
      updateHandle(){
        this.message = "修改完成后的文本信息"
      }
    }
  }
</script>

内容源码附上了。大家可以自己下载源码在本地测试一下。

下面看一下，点击按钮，触发了更新事件之后，页面的发生了哪些变化。

如图所示，默认情况，在数据尚未发生变化时，只有四个钩子函数显示了。当点击更新按钮后，内容更新了，触发了钩子函数。显示出来2个。