Vue 学习笔记之生命周期

末蓝、 2023-06-10 13:25 156阅读 0赞

### 文章目录 ###

*   *   *  Vue 的生命周期函数
         *   *  什么是生命周期函数
             *  Vue 的生命周期函数
             *  实例代码
             *  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 官网图片解释 ####

![生命周期图示][format_png]

[zerolg]: https://www.zerolg.com/
[format_png]: /images/20230531/21179b32fad94251ae6aacafbf14a7c2.png