Vue实例与组件的生命周期

前言：

​ 组件从创建到销毁的一系列过程叫做组件的声明周期。

​ vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发）

---

组件的生命周期钩子函数大致可以分为三个阶段：初始化阶段、运行中阶段、销毁阶段

​ 初始化阶段： beforeCreate 、created、 beforeMount、 mounted

​ 运行中阶段： beforeUpdate 、updated

​ 销毁阶段： beforeDestroy、 destroyed

​ 钩子函数与配置项同级别书写

---

 <div id="app"> 
 	<my-component></my-component>
 </div>
 <template id="my-component">
     <div>
         <h1 id="title">hello~{msg}}</h1>
         <p><input type="text" v-model="msg"></p>
         <p><button @click="destroy">销毁组件</button></p>
     </div>
 </template>

初始化阶段

​ 1. 一个组件或者实例的生命周期都是通过new开始的，组件的new看不到是因为使用的时候Vue的内部帮忙实现

​ 2. 实例化之后，内部会做一些初始化事件与生命周期相关的配置(vue底层做，我们不用管~)
（以组件为例）

<script>
Vue.component('my-component',{
    template:"#my-component",
    data(){
        return {
        msg:1
        }
    },
    methods:{
        destroy(){
        this.$destroy() //销毁组件方法
        }
    },

3. 这个钩子函数初始化时就会立马执行，但此钩子函数里面是获取不到数据的，页面中的真实dom节点也没有挂载出来

beforeCreate(){
    console.log("beforeCreate...");
    console.log(this.msg); //undefined
    console.log(document.getElementById("title")) //null
},

4. created钩子函数内部的数据已经被挂载了，但是真实dom节点还是没有渲染出来

在这个钩子函数里面，如果同步的去更改数据的话，运行中钩子函数是不会执行的(这时直接写一个运行阶段的钩子函数来测试，其并不会执行)

通常会在此钩子函数里面进入ajax的异步操作，另外还可以做一些初始化事件的绑定

created(){
    // this.msg = 233333 可更改数据
    console.log("created");
    this.timer = setInterval(()=>{
    console.log(11111111);
    this.msg++
    },3000)
    console.log(this.msg); //1
    console.log(document.getElementById("title")) //null
},

5. 接下来的过程，就是组件或者实例去查找各自的模板，然后将其编译成虚拟dom，即将放入render函数中做初始化渲染的操作

6. beforeMount代表dom即将被渲染出来，但尚未真正的在页面中渲染出来

此钩子函数与created钩子函数基本一致，可以做ajax与初始化事件的绑定操作

 beforeMount(){
     console.log("beforeMount...")
     console.log(this.msg); //1
     console.log(document.getElementById("title")) //none
 },

生成好了虚拟dom，然后在render函数里面替换对应的el，渲染成真实dom节点

相当于在render函数里面做了一个初始化渲染的操作

执行可见，函数体被打印，视图为空，相当于此render函数把组件内部的render函数覆盖了。自己的render是将虚拟dom渲染成真实dom的操作

 // render(){
 //     console.log("render...")
 // }

7. mounted钩子函数是初始化阶段的最后一个钩子函数

此时，数据已经挂载完毕了，真实的dom也已经渲染出来了，这个钩子函数可以用来做一些实例化的相关操作 ===> 拖拽等

mounted(){
    console.log("mounted.....")
    console.log(this.msg)//1
    console.log(document.getElementById("title")) //对应元素
},

运行阶段

8. 运行时钩子函数初始化阶段是不会主动执行的
   只有dom挂载完毕了，之后数据发生变化的时候，beforeUpdate这个钩子函数才会执行
   这个钩子函数里面，获取的dom里的数据内容是更新之前的内容

  beforeUpdate(){
        // console.log(this.msg)
        console.log("beforeUpdate....",document.getElementById("title").innerHTML)
  },

这个钩子函数里面，获取的dom里的数据内容是更新之前的内容

9. 这个钩子函数里面dom获取的数据内容是更新之后的内容

第8步之后生成了新的虚拟dom，与上一次的虚拟dom结构进行对比，通过diff算法比较出来差异，再去进行真实dom的重新渲染操作

这里updated中的真实dom里面显示的数据跟内存里面的data里的数据趋于一致

updated(){
 	// console.log(this.msg) 与第8步值一样
  	console.log("updated....",document.getElementById("title").innerHTML)
 },

销毁阶段

10. 当组件销毁的时候就会触发执行。 vm.$.destroy方法执行的时候，组件就会被销毁

这个钩子函数代表销毁之前，可以做一些善后操作

例如我们可以清楚一些事件绑定，清除计时器相关操作

beforeDestroy(){
    console.log("beforeDestroyed...")
    clearInterval(this.timer)
},

11. 组件一旦被销毁了，组件的dom结构还是存在的

只是组建的双向数据绑定，事件监听、watch相关的已经被移除掉了

 destroyed(){
     console.log("destroyed...")
     }

 })

0. 通过$mount()指明挂载点

new Vue({}).$mount("#app")
</script>

keep-alive 独有的生命周期，分别为 activated 和 deactivated。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数。