vue - 生命周期

为什么要有生命周期 ？

Vue为了在一个组件的从创建到销毁的一系列过程中添加一些功能，方便我们更好的去控制组件

特别注意：

钩子函数不要写成箭头函数，箭头函数可能会改变this指向

生命周期图示

生命周期初始化阶段

---

vue生命周期初始化阶段 - 4个生命周期钩子【 Hook 】函数

研究方向
! 1. 它们的公共特征
  * a. 组件一旦创建，自动执行
  * b. 执行一次
! 2. 他们各自的特点 / 功能 
  * 我会从下面几个方向研究： data中的数据是否能够获取，真实DOM是否能获取

beforeCreate

! a. 不能获取数据，也不能获取真实DOM
! b. 它可以对new Vue()出来的时候，做初始化事件和生命周期做准备，这些都是内部完成的
! 总结： 这个钩子我们在项目中可以不用

created

! a. 初始化data选项
      * 对data选项中的数据做数据劫持
      * 【 用es5 Object.defineProperty做getter和setter设置  】
! b 可以获取数据，但是不能获取真实DOM
      * 可以对数据做计算、转换、修改等操作
! 总结： 数据请求，然后将请求的结果赋值给我们的数据

beforeMount

! 组件挂载前的准备工作 
! a. 判断是否有el,如果el，那么我们在去判断是否有template,如果都有，
	 通过render函数将jsx渲染为VDOM,这里我们就有了VDOM,如果没有el，
	 那么我们可以使用$mount手动挂载，如果没有template选项，
	 那么我们使用outerHTML手动写一个进去
! b. 可以获得数据，不能得到真实DOM
        * 可以对数据做计算、转换、修改等操作
! 总结： 数据请求，然后将请求的结果赋值给我们的数据 
! 这个钩子我们就让它做内部事务去吧，不去用它

mounted

* 表示组件挂载结束，也就是生成的html已经插入页面结束了
! a. 数据可以获取，真实dom也可以获取
        * 我们可以操作真实DOM
        * 可以对数据做计算、转换、修改等操作

created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作

总结：

      *  项目中
      *  数据请求 -> created/mounted 
      *  DOM操作  ->  mounted   

面试题

    * 1. vue中数据请求往哪里写？  
        * 数据请求初始化阶段都可以写
        * 数据的修改我们后三个钩子
        * 我习惯往mounted里面写 
    * 2. vdom真正在哪里生成的？jsx在哪里解析的？真实dom哪里生成了？

生命周期更新阶段

---

! 触发条件： 数据改变
! 钩子函数一共有两个： 

beforeUpdate

  * 任务： 数据改变，重新生成vdom，然后通过diff算法得到patch补丁对象，自动完成任务
  * 总结： 不操作

updated

  ! 更新结束，那么肯定已经获取真实DOM,也就是说我们可以做真实dom操作了

总结：

  ! 也就是我们在这个阶段使用updated钩子就行

组件的销毁阶段

* 销毁阶段钩子函数的作用是： 自动删除事件以及监听
* 触发条件： 组件被销毁
 ! 外部销毁： 开关【 v-if 】
 ! 内部销毁； 调用   this.$destroy()
    ! 内部销毁组件会被删除，但是组件的真实dom外壳会被遗留
* 钩子函数有两个： 这两个钩子函数没有差别，任意用一个即可

beforeDestroy

destroyed

* 手动操作的作用： 善后
 ! 清除计时器、滚轮事件