本篇文章带大家详细介绍一下vue组件生命周期的三个阶段：创建阶段、运行阶段和销毁阶段，希望对大家有所帮助！
组件生命周期生命周期(life cycle)是指一个组件从 创建 -> 运行 -> 销毁 的整个阶段，强调的是一个时间段。【相关推荐：vuejs视频教程、web前端开发】
生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。
创建阶段beforecreate阶段：我们在初始化事件和生命周期函数时，组件的 props/data/methods尚未被创建，都处于不可用状态。
<script>export default {    props:['info'],    data(){        return {            message:'hello test'        }    },    methods:{        show(){            console.log('调用了 test 组件的 show 方法');        }    },    // 创建阶段的第一个生命周期    beforecreate(){        console.log(this.info); //props        console.log(this.message); //data        this.show() //methods    },}</script>
因为不能使用 props/data/methods 但是我调用了，所有控制台报错。
created阶段：我们已经初始化好 props、data、methods了，组件的 props/data/methods已创建好。都处于可用状态，但是组件的模板结构尚未完成！
<script>export default {    props:['info'],    data(){        return {            message:'hello test'        }    },    methods:{        show(){            console.log('调用了 test 组件的 show 方法');        }    },    // 创建阶段的第二个生命周期函数    created(){        console.log(this.info);        console.log(this.message);        this.show()    }}</script>
created生命周期函数非常常用，在日常项目开发中经常在它里面调用 methods 中的方法，请求服务器的数据，并且把请求到的数据，转存到 data 中，供 template 模板渲染的时候使用！
<template>  <div>    <h2>test组件--{{nums.length}}</h2>  </div></template><script>export default {    props:['info'],    data(){        return {            message:'hello test',            nums:[]        }    },    methods:{        show(){            console.log('调用了 test 组件的 show 方法');        },        initlist(){            const xhr = new xmlhttprequest()            xhr.addeventlistener('load',()=>{                const result = json.parse(xhr.responsetext)                console.log(result);                this.nums = result.data            })            xhr.open('get','请求的接口')            xhr.send()        }    },    created(){        this.initlist()    }}</script><style lang="less" scoped>    div{        background-color: #f00;    }</style>
beforemount阶段：基于数据和模板，在内存中编译生成html结构。将要把内存中编译好的html结构渲染到浏览器中。此时浏览器中还没有当前组件的dom结构。
<template>  <div>    <h2 id="myid">test组件--{{nums.length}}</h2>  </div></template><script>export default {    props:['info'],    data(){},    methods:{},    beforecreate(){}，    created(){},    beforemount(){        console.log('beforemount');        const dom = document.queryselector('#myid')        console.log(dom);    }}</script>
mounted阶段：用内存中编译生成的html结构替换掉el属性指定的dom元素，已经把内存中的html结构，成功渲染到了浏览器之中，此时浏览器中已经包含了当前组件的dom结构。
<template>  <div>    <h2 id="myid">test组件--{{nums.length}}</h2>  </div></template><script>export default {    mounted(){        const dom = document.queryselector('#myid')        console.log(dom);    }}</script>
vue完成模板解析并把初识的真实dom元素放在页面后(挂载完毕)调用 mounted。
<template>  <div>    <h2 :style="{opacity}">欢迎学习vue</h2>  </div></template><script>export default {    data(){        return {            opacity:1        }    },    mounted(){        setinterval(()=>{            //我们在使用箭头函数时，this的指向mounted自动帮我们设置好是 vm 了            this.opacity-=0.01            if(this.opacity {            console.log('setinterval');            this.opacity-=0.01            if(this.opacity <= 0) this.opacity = 1        },6)    },    beforedestroy(){        clearinterval(this.timer)        console.log('vm即将被销毁');    }}</script><style lang="less" scoped>    div{        // background-color: #f00;    }</style>
1）销毁后借助vue开发者工具看不到任何信息。
2）销毁后自定义事件会失效，但原生的dom事件依然有效
3）一般不会在beforedestroy操作数据，因为即使操作数据，也不会再触发更新流程了
总结生命周期：
1）又称：生命周期回调函数、生命周期函数、生命周期钩子。
2）含义：vue在关键时刻帮助我们调用一些特殊名称的函数。
3）生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4）生命周期函数中的this指向是 vm 或 组件实例对象。
常用的生命周期钩子：
1）mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等(初始化操作)
2）beforedestroy：清除定时器、绑定自定义事件、取消订阅消息等(收尾工作)
下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。
（学习视频分享：vuejs入门教程、编程基础视频）
以上就是一文聊聊vue组件生命周期的三个阶段（创建、运行和销毁）的详细内容。