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个。