vue的生命周期及生命周期钩子函数

---

前言

1. vue的生命周期：vue实例从创建的销毁的整个过程
2. vue的生命周期函数：
   - vue生命周期钩子函数/vue生命周期钩子
3. 附着了用户在不同的阶段添加自己代码依赖的机会

---

一、生命周期是什么？

借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。

二、生命周期流程图示

三、生命周期各个阶段

1.创建阶段

1. const vm = new Vue( )
2. Init EventS & Lifecycle
   · 加载事件和生命周期函数
   · 这里的Events指仅仅是自己内部的事件
   
   示例：

   const vm = new Vue({
      el: '#app',
      data: {
        message: 'hello world'，
      },
      	mounted(){
      	
      },
    })

在加载过程中会将mounted()这个事件自动读取到本身的内存中，并不是将这个函数调用起来（仅仅只是读取，将其进行一个获取，并没有都这个事件进行调用），将配置的事件（函数）加载到自己的内部中。
3. 调用beforeCreate（）
4. Init Injections & reactvity
  · 加载数据以及添加数据监听
  · 这里加载的是我们已经在data中配置的数据
  · 这一步在beforeCreate()函数和created()函数之间运行
  · 作用：加载data数据，这是已经给data中的各个属性添加了get和 set方法
  · 在该阶段主要实现了给数据/属性添加get和 set方法，实现数据的双向绑定，在此时也可以监听属性值

注意：
  · 只有在这个时候data中的属性才会有响应
  · 如果之后要添加属性，页面将不会出现响应，这也是经常出现的一个问题点
   解决方案：
    1）：在初始的时候将属性值在data中申明好
    2）：让这个属性的对象成为新的一个对象，那么此时所有的属性都会重新添加get和set方法

const vm = new Vue({
	el: '#app',
    data: {
       message: 'hello world',
       info: {
         a: 1,
         b: 2,
       }
     },
     created(){ 
       this.info = {
   		...this.info,
   		c:3
   		}
     },
 });

这样做的目的在于将c这个属性值定义按时并不会赋值，这是为undefined 。如果后面重新对c进行赋值的话，就将info作为作为一个新的对象，这时就会重新添加get和set方法
    3）：

---

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。