vue生命周期钩子函数

生命周期 （ 王者 ）

1. 什么是生命周期？
   vue中的生命周期指的是 组件 从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（ 这些方法具备一些功能），我们给这些方法起了个名字叫做（ 生命周期钩子函数/ 组件钩子 ）
2. 为什么要学习生命周期？
   因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途
3. 这个生命周期是谁的生命周期？
   组件
4. 项目中生命周期如何书写（ 功能 ）

生命周期 钩子函数

• Vue的生命周期分为三个阶段，分别为： 初始化，运行中， 销毁，一共8个钩子函数

• 注意： 生命周期钩子函数不允许写成箭头函数

• 初始化：

  beforeCreate    -----------------------------------------                                              
    1. 组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
    2. 数据没有获得，真实dom也没有渲染出来
    3. 可以进行数据请求，提供了一次数据修改的机会
    4. 执行一次
  
  created         -----------------------------------------   
    1. 组件创建结束
    2. 数据得到了，真实dom没有渲染出来
    3. 可以进行数据请求，提供了一次数据修改的机会
    4. 执行了一次
  beforeMount      ----------------------------------------   
    1. 组件挂载前 
    2. 任务： 判断el   判断 template
        如果el没有，那么我们需要手动挂载，如果有，那么判断template
        如果template有，那么进行render函数
        如果template没有，那么通过 outerHTML 手动书写模板
    3. 数据可以获得，但是真实dom还没有渲染
    4. 可以进行数据请求，也提供了一次数据修改的机会
    5. 执行一次
  mounted         ------------------------------------------  
    1. 组件挂载结束
    2. 数据获得了，真实dom也获得了
    3. 可以进行数据请求，也就可以修改数据
    4. 执行了一次
    5. 可以进行真实dom的操作了（ 可以进行第三方库的实例化了 ）
  
     -------------------------- 运行中------------------------------
  触发条件：数据更新
  beforeUpdate
    1. 更新前
    2. 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
    3. 这个钩子函数更多的是内部进行一些操作，我们就不在多干预了
    4. 可以触发多次
  updated
    1. 更新结束
    2. 真实dom得到了，数据也得到了（ 更新后的 ）
    3. 动态数据获取（  第三方库实例化  ）
    4. 可以触发多次
  综上总结：
    1. 数据请求一般写在created里面
    2. 第三方库实例化我们一般会往mounted中写
  
    Vue的销毁有两种形式
  1. 通过开关的形式
  2. 通过调用 $destroy 方法
  
    -------------------- vue生命周期的销毁阶段 -------------------
      触发条件： 当组件销毁时： 
      beforeDestroy
  
      destroyed
  
      统一讲两个钩子
        为什么？
        因为这两个钩子功能一致的，这两个钩子没有太大的区别
  
      作用： 
        用来做善后的,比如计时器的关闭 第三方实例的删除
  
       配置项写在生命周期钩子函数的上
  
      对比： 内部销毁 vs 外部销毁
  
        外部销毁不仅能销毁组件，也能销毁该组件的dom结构
        内部销毁只能销毁组件，不能销毁组件的dom结构  
  

    <div id="app">
        <Hello></Hello>
    </div>
    <template id="hello">
        <div>
        <p> {{ msg }} </p>
        </div>
    </template>

Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: 'hello 相亲了'
      }
    },
    beforeCreate () {
      console.log('1-beforeCreate')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))

      // fetch('./data.json')
      //   .then( res => res.json())
      //   .then( data => this.msg = data )
      //   .catch( error => console.log( error ))

    },

    created () {
      console.log('2-created')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
      // fetch('./data.json')
      // .then( res => res.json())
      // .then( data => this.msg = data )
      // .catch( error => console.log( error ))
    },
    beforeMount () {
      console.log('3-beforeMount')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
      // fetch('./data.json')
      // .then( res => res.json())
      // .then( data => this.msg = data )
      // .catch( error => console.log( error ))
    },
    // render() render函数作用是将  jsx 转换成 vdom 对象模型 

    mounted () {
      console.log('4-mounted')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
      fetch('./data.json')
      .then( res => res.json())
      .then( data => this.msg = data )
      .catch( error => console.log( error ))
    },
    // ----------------------- 运行中-----------------------
    beforeUpdate () {
      console.log('beforeUpdate')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
    },
    updated () {
      console.log('updated')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
    }


})

  new Vue({
    el: '#app'
  })

生命周期销毁代码

• 外部销毁

  <div id="app">
    <button @click = "flag = !flag"> 切换 </button>
    <Hello v-if = "flag"></Hello>
  </div>
  <template id="hello">
    <div>
      hello
    </div>
  </template>

• 内部销毁

  <div id="app">
    <Hello></Hello>
  </div>
  <template id="hello">
    <div class="hello-box">
      <button @click = "clear"> 销毁 </button>
      hello
    </div>
  </template>

• 公共js代码

  Vue.component('Hello',{
    template: '#hello',
    methods: {
      clear () {
        this.$destroy()
      }
    },
    mounted () {
      this.time = setInterval ( () => {
        console.log( '1903' )
      },1000)
    },
    beforeDestroy () {
      console.log('beforeDestroy')
      clearInterval( this.time )
      document.querySelector('.hello-box').remove()
    },
    destroyed () {
      console.log('destroyed')
    }
  })
  new Vue({
    el: '#app',
    data: {
      flag: true
    }
  })

Vue.js官网上的生命周期图示