Vue生命周期

先放一张官网生命周期图：

1. 生命是生命周期呢？

当前组件在创建到销毁经历的一系列过程，称之为生命周期

2. 生命周期的分为几个阶段？每个阶段有哪些钩子函数

生命周期分为3个阶段，这三个阶段分别是： 初始化 、 运行中 、 销毁

初始化阶段：有4个钩子函数 ， 触发条件是自动的

  beforeCreate
    1. 组件即将创建，进行组件事件和生命周期的初始化
    2. 项目中一般不使用
    3. 有的开发者也会在这里进行数据请求
  created
    1. 组件创建完成
    2. 项目中：
        1） 异步请求接口数据
        2） 数据修改
  beforeMount
    1. 组件即将挂载
    2. 判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实例组件中的其他子组件是否有template选项，如果没有，那么使用outerHTML插入
    3. 项目中： 
        1） 异步请求接口数据
        2） 数据修改
  mounted
    1. 组件挂载结束
    2. 使用真实DOM替换VDOM
    3. 项目中
        1） 异步请求接口数据
        2） 数据修改
        3） 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的）  )

  总结： 初始化过程中在项目中使用
      数据请求：created
      DOM操作： mounted
      数据修改： beforeMount  created  mounted 

运行中阶段：有2个钩子函数 ： 触发条件是： 当data选项中的数据发生改变时

      beforeUpdate： 
            内部操作 ：  vdom生成和diff的对比
            我们可以不使用
      updated：
        	Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库实例化

销毁阶段： 有2个钩子函数

      beforeDestory: 组件即将销毁，准备调用 $destroy() 方法
      destoryed： 组件销毁结束

      这两个钩子函数没有什么区别，功能很相似

      项目中： 
        这两个钩子函数都可以用来做善后,把一些计时器，第三方库实例化出来的实例

      组件销毁的两种方式： 
        1. 使用$destroy()方法（内部销毁）
            缺点： 会将组件的模板也保留下来
        2. 使用开关销毁（外部销毁）
            v-if
            这种类型的销毁不会留有模板

有一个钩子函数可以不写，这个钩子函数就是我们  render  函数 

3. 名词解释：

钩子函数：

钩子函数就是options配置项中的一个方法，在特定的触发条件（ 时机 ）下会自动触发

4. 除了根实例组件以外，其他的组件中的数据项 data 必须是一个函数，而且这个函数必须返回一个对象

  为什么是函数呢？ 
  原因：我们希望组件的数据是独立的，有一定作用域的
  为什么返回值是对象？
  原因： 是为了符合 数据驱动 原理设计，让observer将data选项中的数据设置  getter  和  setter

5. 其他选项写在生命周期的上

*/
Vue.component( 'Hello',{
template: '#hello',
data () { //除了根式
  return {
    money: 2000
  }
},
methods: {
      destory () {
        this.$destroy()
      }
    },
//初始化
beforeCreate () { 
  /* 
    这个阶段：组件创建前
      data  data选项中的数据获取不到
      RDOM  拿不到
      项目中： 没什么用
      但是这个阶段是一个对事件和生命周期的准备阶段，也是必不可少的
  */
  console.log('1-beforeCreate')
  console.log( 'data', this.money )
  console.log( '真实DOM',document.querySelector('h3') )
},
created () { // 组件创建结束
   /* 
    这个阶段：
      data  data选项中的数据获到了
      RDOM  拿不到
      项目中： 
          数据的修改
          异步数据请求
  */
  this.money = 20000
  console.log('2-created')
  console.log( 'data', this.money )
  console.log( '真实DOM',document.querySelector('h3') )
},
beforeMount () { //组件即将挂载
    /* 
    这个阶段：
      data  data选项中的数据获到了
      RDOM  拿不到
      项目中： 
          数据的修改
          异步数据请求
  */
  this.money = 10000000
  console.log('3-beforeMount')
  console.log( 'data', this.money )
  console.log( '真实DOM',document.querySelector('h3') )
},
mounted () { //组件挂载结束了
  /* 
    这个阶段：
      data: 可以获得数据
      RDOM: 拿到了
      项目中： 
          数据修改
          异步数据请求
          真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的）  )

 */
 this.time = setInterval( () => {
  console.log( 1 )
 },1000)
  document.querySelector('h3').style.background  = 'red'
  console.log('4-mounted')
  console.log( 'data', this.money )
  console.log( '真实DOM',document.querySelector('h3') )
},
// ------------------------------------运行中---------------------
beforeUpdate () { //表示组件即将更新   vdom --diff--> vdom的不同（patch对象）
  /* 
    这个阶段： 
      data: 拿到了
      RDOM： 获得
      这个阶段进行的是vdom的生成和diff算法的对比，都是内部进行的，我们在项目中可以不使用
   */
  console.log(' 1- beforeUpdate ')
  console.log( 'data', this.money )
  console.log( '真实DOM',document.querySelector('h3') )
},
updated () { // 组件更新结束 ， 通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新
  /* 
    这个阶段：
       动态数据的渲染，进行dom操作（ 第三方库的实例化 ）
   */
  document.querySelector('h3').style.background = 'blue'
  console.log(' 2- updated ')
  console.log( 'data', this.money )
  console.log( '真实DOM',document.querySelector('h3') )
},
// --------------------------------------销毁 -------------
beforeDestroy () {
  console.log( 'beforeDestroy ')
},
destroyed () {
  clearInterval( this.time )
  console.log( 'destroyed')
}
})

new Vue({
// el: '#app',
data: {
  msg: 'hello 2019',
  flag: true
}
}).$mount('#app')