Vue生命周期

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

生命周期

总的来说Vue生命周期分为4个阶段

创建期：执行函数beforeCreate(执行后初始化vue组件)     created

挂载期：执行函数beforemount      mounted(执行后，ui渲染)

更新期：执行函数beforeUpdate    updated

销毁期：执行函数beforeUnmount unmounted

<template>
    <h3>vue生命周期应用</h3>

    <h4>1、通过ref来读取dom元素</h4>
    <p ref="test1">获取dom元素</p>
    <h4>2、模拟请求</h4>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    beforeCreate() {
        console.log('创建前')
        console.log(this.$refs.test1) //undefined  因为还没有创建dom元素
    },
    created() {
        console.log('创建后')
        console.log(this.$refs.test1) //undefined  因为还没有创建dom元素
    },
    beforeMount() {
        console.log('挂载前')
        console.log(this.$refs.test1) //undefined  因为还没有创建dom元素
    },
    mounted() {
        console.log('挂载后')
        //ui渲染完成，这里时候做操作 例如发送http请求
        console.log(this.$refs.test1) //<p>获取dom元素</p>
    },
    beforeUpdate() { console.log('更新前') },
    updated() { console.log('更新后') },
    beforeUnmount() { console.log('销毁前') },
    unmount() { console.log('销毁后') }
}
</script>

动态组件

<component :is="xxx"></component> 可以实现组件切换

    <component :is="aa"></component>

  <button @click="给个点击事件，然后切换变更aa的值，就可以完成切换"></button>

组件保持存活

当使用<component :is="..."></component>来完成组件切换时，被切换的组件将被销毁（进到销毁函数中去beforunmount unmounted），当切换回来时，组件从新走遍生命周期（创建...挂载），（假设上个页面我写东西写到一半然后切换到了另一个tab）那么从新加载的数据将又是默认没操作过的，这样很不友好，那么我们可以使用

<KeepAlive>   <component :is="..."></component>  </KeepAlive>，包裹在里面的组件将保持原有状态，不销毁（不进入函数beforunmount unmounted）