生命周期

什么是生命周期？

• vue中的生命周期指得是组件从创建到销毁的过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（这些方法具备一些功能），我们在这些方法取了一个名字叫做生命周期钩子函数。（组件钩子）

生命周期目的？

• 要在生命周期钩子中实现项目功能，那么我们必须要知道每一个钩子函数的功能。

这个生命周期是谁的生命周期？

• 组件

项目中生命周期如何书写（针对功能）

• Vue的生命周期分为三个阶段，初始化，运行中，销毁三个阶段，一共八个钩子函数，生命周期的钩子函数不能写成箭头函数（this指向）

初始化

• 初始化的四个钩子
• beforeCreate
• 组件创建前触发，目的是为了组件的生命周期和组件中的事件做准备。
• 数据没有得到，真实dom也没有渲染出来。
• 对项目而言，没有太大用处，不过可以进行数据请求，可以提供一次修改数据的机会
• 执行一次

<div>
 <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)//data undefined
     console.log('real dom',document.querySelector('p'))//real dom null
     fetch('./data.json')
      .then(res=>res.json())
      .then(data=>console.log(data))
      .then(data=>this.msg=data)
      //是可以附上值得
      .catch(error=>console.log(error))
      //数据是可以拿到的
    }
})
new Vue({
    el:'#app'
})

• created
• 创建创建结束
• 数据得到了，真实dom没有得到
• 可以进行数据请求，提供了一次数据修改的机会
• 执行一次

<div>
 <Hello><Hello>
</div>
<template id="hello">
  <div>
    <p>{{msg}}</p>
  </div>
</template>
Vue.component('Hello',{
    template:'#hello',
    data(){
        return{
            msg:'hello 相亲'
        }
    }，
    created(){
     console.log('2-created')
     console.log('data',this.msg)//data 有修改前的数据
     console.log('real dom',document.querySelector('p'))//real dom null
     fetch('./data.json')
      .then(res=>res.json())
      .then(data=>console.log(data))
      .then(data=>this.msg=data)
      //是可以附上值得
      .catch(error=>console.log(error))
      //数据是可以拿到的
    }
})
new Vue({
    el:'#app'
})

• beforeMount
• 组件挂载前
• 任务：判断el 判断template
  如果el没有，需要进行手动挂载
  如果有el，那么判断template
  如果有template那么进行render函数
  如果template没有，那么通过outerHTML手动书写模板
• 数据可以获得，真实dom还没有渲染
• 可以进行数据请求，提供了一次修改数据的机会
• 执行一次

<div>
 <Hello><Hello>
</div>
<template id="hello">
  <div>
    <p>{{msg}}</p>
  </div>
</template>
Vue.component('Hello',{
    template:'#hello',
    data(){
        return{
            msg:'hello 相亲'
        }
    }，
    beforeMount(){
     console.log('1-beforeMount')
     console.log('data',this.msg)//data 数据有了
     console.log('real dom',document.querySelector('p'))//real dom null
     fetch('./data.json')
      .then(res=>res.json())
      .then(data=>console.log(data))
      .then(data=>this.msg=data)
      //是可以附上值得
      .catch(error=>console.log(error))
      //数据是可以拿到的
    }
})
new Vue({
    el:'#app'
})

• render()作用是将jsx转换成vdom对象模型（看不见摸不着但是有的）
• mounted
• 组件挂载结束，组件已经插入到页面中
• 数据获得了，真实dom也获得了（vdom-》realdom）
• 可以进行数据请求，也提供了一次数据修改的机会
• 执行一次
• 可以进行真实dom的操作了（可以进行第三方库的实例化了）

<div>
 <Hello><Hello>
</div>
<template id="hello">
  <div>
    <p>{{msg}}</p>
  </div>
</template>
Vue.component('Hello',{
    template:'#hello',
    data(){
        return{
            msg:'hello 相亲'
        }
    }，
    mounted(){
     console.log('4-mounted')
     console.log('data',this.msg)//data 有了
     console.log('real dom',document.querySelector('p'))//real dom 有了
     fetch('./data.json')
      .then(res=>res.json())
      .then(data=>console.log(data))
      .then(data=>this.msg=data)
      //是可以附上值得
      .catch(error=>console.log(error))
      //数据是可以拿到的
    }
})
new Vue({
    el:'#app'
})

综上总结

1. 数据请求按照个人习惯都是写在created里面。
   created刚好可以获得初始化的数据，第一次的时候得到了就请求。
2. 第三方库实例化按照个人习惯写在mounted。
   得到了真实的dom，就在这个钩子里操作。

运行中

• 触发条件：数据更新才会触发
• beforeUpdate

1. 更新前
2. 重新渲染vdom 通过diff算法比较两次vdom，生成patch补丁对象
3. 这个钩子函数更多的是内部进行一些操作，我们就不再多干预了
4. 可以触发多次，只要数据更变，就会触发

<div>
 <Hello><Hello>
</div>
<template id="hello">
  <div>
    <p>{{msg}}</p>
  </div>
</template>
Vue.component('Hello',{
    template:'#hello',
    data(){
        return{
            msg:'hello 相亲'
        }
    }，
    beforeUpdate(){
     console.log('beforeUpdate')
     console.log('data',this.msg)//data 有数据更新
     console.log('real dom',document.querySelector('p'))//real dom 有了 新的p
    }
})
new Vue({
    el:'#app'
})

• update

1. 更新结束
2. 真实dom得到了，数据也得到（更新后的）
3. 动态数据的获取（第三方库的实例化）
4. 可以执行多次

<div>
 <Hello><Hello>
</div>
<template id="hello">
  <div>
    <p>{{msg}}</p>
  </div>
</template>
Vue.component('Hello',{
    template:'#hello',
    data(){
        return{
            msg:'hello 相亲'
        }
    }，
    updated(){
     console.log('6-updated')
     console.log('data',this.msg)//data 有了
     console.log('real dom',document.querySelector('p'))//real dom 有了
    }
})
new Vue({
    el:'#app'
})

销毁

• Vue的销毁有两种方式

1. 通过开关的形式-外部销毁
2. 通过调用$destroy的方法——在当前组件内

• beforeDestroy
• destroyed
• 这两个钩子功能一致的，这两个钩子没有太大的区别

3. 作用：是用来做善后的，比如计时器的关闭，第三方库的删除。

<div>
 <button @click="flag=!flag"></button>
 <Hello v-if="flag"><Hello>
</div>
<template id="hello">
  <div>
    <p>{{msg}}</p>
  </div>
</template>
Vue.component('Hello',{
    template:'#hello',
    
    //放一个计时器
    mounted(){
      this.time=setInterval(()=>{
        console.log('1903')
      },1000)
    },

    //组件销毁计时器并不会关闭
    beforeDestroy(){
      console.log('beforeDestroy')
      clearInterval(this.time)
    },
    destroyed(){
      console.log('destroyed')
    }
})
new Vue({
    el:'#app'，
    data:{
      flag:true
    }
})


- 第二种调用$destroy方法 组件内部 内部销毁
<div id="app">
  <Hello></Hello>
</div>
<template id="hello">
 <div>
 <button @click="clear">销毁</button>
  hello
 </div>
</template>
Vue.component('Hello',{
  template:'#hello'，
  methods：{
    clear（）{
      this.$destroy()
    }
  },
  destroyed(){
    console.log('destroyed')
  }
})
new Vue({
  el:'#app'
})

• 两种销毁方式对比，内部和外部
  外部销毁不仅能删除销毁组件，也能销毁该组件的dom结构
  内部销毁只能销毁组件，不能销毁组件的dom结构