Vue 生命周期

一. Vue 生命周期图

1. 官方原图

该图是官方给出的生命周期图，下图是老刘画的图

2. 大神原图

二. Vue 生命周期

钩子函数	描述
beforeCreate	创建Vue实例之前调用
created	创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount	渲染DOM之前调用
mounted	渲染DOM之后调用
beforeUpdate	重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated	重新渲染完成之后调用
beforeDestroy	销毁之前调用
destroyed	销毁之后调用

create

let vm = new Vue()

---

mount

挂载，把div挂载到组件中

update

let vm = new Vue({
    el: '#box',
    data: {
        isShow: true    // 修改这个内容
    },
    methods: {
        handleClick() {
            console.log('我是根组件')
        }
    }
})

---

1.bedoreCreate

2.created

这个用的多，只要创建，data变量就初始化完成了，一般是从后端获取到的，在此处发送ajax请求

3.beforeMount

4.mounted

5.beforeUpdate

6.updated

7.beforeDestroy

8.destroyed

组件销毁 - 给组件写一个定时器

setTimeout()     // 延迟3s干什么事
setInterval()    // 延迟3s干什么事

三. 测试代码

这里使用简易组件测试。

<div id="app">
    <button @click="handleShow">点我组件显示和消失</button>
    <Child v-if="show"></Child>

</div>


<script>
    // 创建一个组件
    Vue.component('Child', {
        template: `
          <div>
          <h1>{{ name }}</h1>
          <button @click="handleClick">点我</button>
          </div>
        `,
        data() {
            return {
                name: 'xwx',
                t: '',
            }
        },
        methods: {
            handleClick() {
                alert('xwx')
            }
        },
        beforeCreate() {
            console.log('组件创建之前执行 beforeCreate')
        },
        created() {
            console.log('组件创建成功后执行 created')
            // 延迟任务，延迟几秒执行某个函数
            // setTimeout(()=>{
            //     alert('lqz is handsome')
            // },3000)

            // 定时任务，每隔几秒，执行一次
            this.t = setInterval(() => {
                console.log('3s结束了')
            }, 3000)
        },
        beforeMount() {
            console.log('渲染之前调用 beforeMount')
        },
        mounted() {
            console.log('渲染之后调用 mounted')
        },
        beforeUpdate() {
            console.log('重新渲染前调用 beforeUpdate')
        },
        updated() {
            console.log('重新渲染后调用 updated')
        },
        beforeDestroy() {
            console.log('销毁之前调用 beforeDestroy')
            clearInterval(this.t)
            this.t = null
        },
        destroyed() {
            console.log('销毁之后调用 destroyed')
        }

    })


    new Vue({
        el: '#app',
        data: {
            show: false,
        },
        methods: {
            handleShow() {
                this.show = !this.show
            }
        }
    })

</script>