VUE05——组件生命周期

组件从创建到销毁的过程叫做组件的生命周期

vue在整个生命周期中为我们提供了一些钩子函数钩子函数的特点就是毁在生命周期的某一刻去触发

• 生命周期：
  组件的生命周期分为三个阶段：初始化 运行中 销毁
  各阶段中包括下列钩子函数：
  初始化阶段：beforeCreate created beforeMount (render) mounted
  运行中阶段：beforeUpdate updated
  销 毁 阶 段：beforeDestroy destroyed

Vue官方图析：

• 组件或实例在生命周期内都干了些什么？
• 内部有8个钩子函数，钩子函数在特定的时间触发。
  1、一个组件或者实例的声明周期都是从new创建开始的。

new Vue({}).$mount("#app")

2、实例化之后，内部会进行初始化的事件和声明周期相关的配置。

 Vue.component("my-component",{
     template:"#my-component",
      data(){
          return {
              msg:1
          }
      },
      methods:{
	      destroy(){
	          this.$destroy();//销毁组件
	      }
	  },

3、beforeCreate钩子函数：初始化事件和声明周期，这个钩子函数获取不到数据，dom元素也不能渲染出来，所以此函数基本不会做任何事情。

 beforeCreate(){
 	console.log("beforeCreate...")
    console.log(this.msg,document.getElementById("title"))
}
输出：eforeCreate...    undefined null

4、created钩子函数：

• 这个钩子函数已经获取到数据了，但是dom元素也渲染不出来
• 这个钩子如果同步更改数据，不会影响运行时的钩子函数
• 可以用来发送ajax请求和一些初始化事件的操作

created(){
    this.timer = setInterval(() => {
        console.log(11111111)
        this.msg++
    }, 2000);
    console.log("created...")
    console.log(this.msg,document.getElementById("title"))
}
输出：created...     1 null

下面就是组件或实例去查找各自的模板，然后将其编译成虚拟dom放入到render函数中

5、beforeMount钩子函数：

• 这个钩子函数代表dom节点马上要被渲染出来了，但是还没有渲染出来
• 此钩子函数和created函数差不多，都是可以进行ajax请求与初始化事件的操作

 beforeMount(){
    console.log("beforeMount...")
    console.log(this.msg,document.getElementById("title"))
}
输出：beforeMount...     1  null

6、mounted钩子函数：

• mounted 是生命周期初始化阶段的最后一个钩子函数
• 这个钩子函数，数据早就拿到了，同时dom元素也渲染出来了。

mounted(){
    console.log("mounted...")
    console.log(this.msg,document.getElementById("title"))
}  
输出：mounted...  1  <h1>Hello!</h1>

7、beforeUpdate钩子函数：

• beforeUpdate钩子函数初始化时不会被执行，从名字就能看出来只有在数据更改的时候才会执行。
• 但是beforeUpdate在数据发生改变的时候，获取到的只能是数据改变之前的值。
• 【注意】千万不要在beforeUpdate这个函数内部做更改数据的操作，这个否则会造成死循环

beforeUpdate(){
 	console.log("beforeUpdate...")
    console.log(document.getElementById("title").innerHTML)
}
输出：beforeUpdate...  1

8、updated钩子函数：

• update获取到的是数据更新之后的内容
• 内部操作：生成新的虚拟dom，和之前的虚拟dom进行对比，对比出来差异后进行渲染更新

updated(){
    console.log("updated...")
    console.log(document.getElementById("title").innerHTML)
}
输出：updated...  更新后的数据

9、beforeDestroy钩子函数：

• beforeDestroy可以在销毁前做一些善后工作，例如可以清楚在初始化时添加的事件

beforeDestroy(){
	console.log("beforeDestroy...")
	//清除定时器操作
	clearInterval(this.timer)
}
输出：beforeDestroy...  并清除定时器

10、destroyed钩子函数

• 销毁组件，意味着组件的双向数据绑定、watcher事件监听等也都被移除掉了
• 但是组件dom结构还是存在的

destroyed(){
	console.log("destroyed...")
}
输出：destroyed...  并将组件的数据双向绑定、watcher事件监听等移除掉 dom结构依然存在

《个人笔记》