vue的生命周期、动画

一、vue的生命周期：

        vue的生命周期：从vue实例创建到销毁之间的各种事件

        生命周期函数=生命周期事件=生命周期钩子

        主要有八种生命周期：

    1.beforeCreate:第一个生命周期，表示实例完全被创建出来之前,会执行它。

beforeCreate() {
                console.log(this.msg);
                console.log('beforeCreate');
            },

    2.created：第二个生命周期,初始化已经完成，是第一个可以操作data,methods的生命周期

created() {
                console.log('created');
                console.log(this.msg);
            },

   3.beforeMount：第三个生命周期,挂载的虚拟的DOM，模板已经存在内存中但并没有渲染到页面上

 beforeMount() {
                console.log('beforeMount');
               
            },

 4.mounted：第四个生命周期,挂载的真实的DOM，我们可以内存中的模板已经渲染到了页面上，是实例创建的最后一个生命周期

mounted() {
                console.log('mounted');
            },

  5.beforeUpdate：第五个生命周期,data中的数据更新完成，但页面中的数据依然是旧数据

beforeUpdate() {
                console.log('beforeUpdate');
            },

 6.update：第六个生命周期,data和页面中的数据都是新的

updated() {
                console.log('updated');
            },

 7.beforeDestroy：第七个生命周期,在销毁之前的，会清空所有监听和定时器

beforeDestroy() {
                console.log('beforeDestroy');
            },

  8.beforeDestroy：第八个生命周期,最后一个生命周期，销毁完成

       destroyed() {

            }

二、vue动画

         需要使用transition 的封装组件，如：

 <transition>
            <div v-show="flag">
                {{msg}}
            </div>
        </transition>

        在进入/离开的过渡中，会有 6 个 class 切换。

1.v-enter：定义进入过渡的开始状态：

.v-enter {
            transform: translateX(500px);
        }

2.v-enter-active：定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。：

.v-enter-active {
            transition: all 2s;
        }

3.v-enter-to：定义进入过渡的结束状态。：

.v-enter-to {
            transform: translateX(0);
        }

4.v-leave：定义离开过渡的开始状态：

.v-leave {
            transform: translateX(0);
        }

5.v-leave-active：定义离开过渡生效时的状态，这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。：

.v-leave-active {
            transition: all 2s;
        }

6.v-leave-to：定义离开过渡的结束状态：

.v-leave-to {
            transform: translateX(-500px);
        }

#注意：其中v可以替换为你为transition 的封装组件定义的name属性：

<style>
.msg-enter {
            transform: translateX(-500px);
        }

</style>

        <transition name="msg">
            <div v-show="flag">
                {{msg}}
            </div>
        </transition>