Vue的生命周期函数

最新推荐文章于 2024-07-22 11:56:16 发布

kcorih

最新推荐文章于 2024-07-22 11:56:16 发布

阅读量223

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/kcorih/article/details/99991638

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先，我们来明白什么是生命周期。
百度百科上对生命周期的定义是指一个对象的生老病死。那么对于Vue来说，什么又是Vue的生命周期呢？
Vue的生命周期又叫实例的生命周期。Vue创建的实例需要经过创建、运行、销毁过程，这些过程又伴随着许多事件，这些事件的总称我们就可以叫做Vue的生命周期。
下面我附上一位技术讲师的流程图，来详细说明生命周期。
在这里插入图片描述
我们先来走一遍这个流程

创建实例

var vm=new Vue({})

这就表示创建了一个Vue实例对象。
接下来我们初始化Vue的实例对象

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

beforeCreate

这是我们遇到的第一个生命周期函数，表示实例被完全创建出来，会执行它。
这时候我们会得到如下结果
在这里插入图片描述
表明在beforeCreated生命周期执行的时候data和methods中的数据都还没有初始化

created

created是我们遇到的第二个周期函数，这里data和methods都已经被初始化好了。

  created() { //这是我们遇到第二个生命周期函数

                        //在created中 data和 methods 都已经被初始化好了
                        //如果要调用data中的数据或者methods中的方法，最早，只能在created中操作
                console.log(this.msg);
                this.show()

            }

我们会得到如下结果
在这里插入图片描述
所以我们如果要对data中的数据或者methods中的方法进行操作，最早，只能在created中进行。

beforeMount

这是我们遇到第三个生命周期函数，表示模板已经在内存中编辑，但是还没有把模板渲染到页面中去。

 beforeMount() { //这是我们遇到的第三个生命周期的函数，表示模板已经在内存中编辑，但是尚未把模板渲染到页面中去

                console.log(document.querySelector('h3').innerText)//{{msg}}  表示还没有把模板渲染到页面中去
                //在beforeMount 执行的时候，页面中的元素，还没有被真正的替换过来，只是之前写到的一些模板字符串
            },

结果如下
在这里插入图片描述
我们可以输出下结果看到还并没有把模板渲染到页面中去。在beforeMounted执行的时候，页面中的元素，还没有被真正的替换过来，只是之前写到的一些模板字符串

mounted

这是我们遇到的第四个生命周期函数，表示内存中的模板，已经真正的挂载到了页面中，用户已经可以看到渲染好的页面。

            mounted() { //这是我们遇到的第四个生命周期的函数，表示内存 中的模板， 已经真正的挂载到了页面中，用户已经可以看到渲染好的页面
                
                console.log(document.querySelector('h3').innerText)
                //注意 ：mounted是实例创建 的最后一个生命周期，当执行完methods 就表示实例已经被完全的创建好了，此时，如果没有其他操作的话
                //这个实例，就静静的躺在我们的内存汇中，一动不动 
            },

结果如下
在这里插入图片描述
注意：mounted是实例创建的最后一个生命周期，当执行完methods 就表示实例已经被完全的创建好了，此时，如果没有其他操作的话，这个实例，就静静的躺在我们的内存汇中，一动不动。

运行

接下来的两个事件是运行中的事件

beforeUpdate

  beforeUpdate() {

                console.log('页面上的元素是 '+document.querySelector('h3').innerText);//ok
                console.log('data中的msg数据是'+this.msg)//no

                //结论：当执行beforeUpdated事件的时候，页面中的显示的数据还是旧的，此时data中的数据时最新的，页面上尚未和最新的数据保持同步

            },

运行结果如下
在这里插入图片描述
结论：当执行beforeUpdated事件的时候，页面中显示的数据还是旧的，此时data中的数据时最新的，页面上尚未和最先的数据保持同步

updated

 updated() { //updated事件执行额时候，页面和data数据已经保持同步了，都是最新的
                console.log('页面是的元素是'+document.querySelector('h3').innerText);//no
                console.log('data中的msg数据时'+this.msg)//no
            },