Vue 学习笔记之生命周期

我的个人博客: zerolg 欢迎来访！

Vue 的生命周期函数

什么是生命周期函数

• 生命周期函数就是在某个时间点会自动执行的函数

Vue 的生命周期函数

**Vue 的生命周期函数不需要写在Vue 的 Method 中 **

1. beforCreate() : 当在创建Vue 实例初始化结束后自动执行

2. created(): 当初始化外部的注入 数据的双向绑定后自动执行

3. beforMount():

   第一步询问是否有el 标签 在询问 是否有template 模版 如果有则用模版 渲染 没有则用el 包含的容器为模版渲染模模版版和数据挂载前执行

4. mounted():在数据和模版挂载后自动执行

5. beforeDestroy(): 当组件被即将被销毁时

6. destroyed():当组件完全被销毁时

7. beforeUpdate: 当数据发生改变时,页面还没许渲染执行前

8. Updated:当数据发生改变 页面重新渲染后

实例代码

 beforeCreate: function () {
            console.log("beforeCreate");
        },
        //在创建实例后对外部注入和数据双向绑定后自动执行
        created: function () {
            console.log("created");
        },
        //在数据渲页面挂载前自动执行
        beforeMount: function () {
            console.log(this.$el);
            console.log("beforeMount");
        },
        //在数据挂载后自动执行
        mounted: function () {
            console.log(this.$el);
            console.log('mounted');

        },
        //在实例组件被销毁之前
        beforeDestroy: function () {
            console.log("beforeDestroy")
        },
        //在实例被销毁只后
        destroyed: function () {
            console.log('destroyed');
        },
        //数据更新的时候 页面还没渲染之前
        beforeUpdate: function () {
            console.log('beforeUpdate');
        },
        //数据渲染之后 页面渲染后
        updated: function () {
            console.log('updated')
        }

Vue 官网图片解释