浅谈Vue组件的生命周期

最新推荐文章于 2024-03-29 04:52:25 发布

香香串串

最新推荐文章于 2024-03-29 04:52:25 发布

阅读量145

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/wgh2820777641/article/details/105079447

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

生命周期

组件的生命周期，是组件从创建到销毁的过程就叫做组件的生命周期。
vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发）

生命周期的钩子函数
钩子函数可以分为三个阶段：初始化，运行中，销毁。
每一个阶段都有对应的钩子函数
初始化阶段：beforeCreate created beforeMount mounted
运行中阶段：beforeUpdate updated
销毁阶段中: beforeDestroy destroyed

生命周期的主要阶段

初始化阶段

一个组件或者实列的生命周期都是通过new开始的
实列化之后，内部会做一些初始化事件与生命周期相关的配置

	 Vue.component("my-component",{
           template:"#my-component",
           data(){
               return {
                   msg:1
               }
           },

3.beforeCreate这个钩子函数初始化的时候就立马执行了，这个钩子函数是获取不到数据的为undefinde也获取不到页面的真实dom值额为null。

beforeCreate(){
       console.log("beforeCreate....")
           console.log(this.msg,document.getElementById("title"))
       },

4.created这钩子函数被执行的时候内部的数据已经被挂载了但是由于真实的Dom值还没有开始渲染，也就获取不到Dom值。在这个钩子函数里面是由于真实的Dom之没有渲染出来，数据已经赋值了就可以在这个函数里面经行数据的获取。在这个钩子函数里面是不能去同步去修改数据的。一般会在这个函数里面进给ajax操作另外还可以做一些chu’shi’hua事件的绑定。

 created(){
 // this.msg = 222222222222222
      console.log("created...")
      console.log(this.msg,document.getElementById("title"))
  },

5.在接下来的过程中，就是组件或者实例去查找各自的模板，让后将其编译成虚拟dom，即将放入render函数中做初始化渲染的操作。
6.beforeMount这个钩子函数就是代表dom马上要被渲染出来了，但是还没有被渲染出来，此时的这个钩子函数和created钩子函数基本一致，也可以用来做ajax的初始化事件的绑定操作。

 beforeMount(){
        console.log("beforeMount....")
            console.log(this.msg,document.getElementById("title"))
        },

运行中阶段

7.mounted函数是初始化阶段的最后一个钩子函数，到这个函数的位置的时候就是数据已经挂载完成了，真实的dom也已经渲染出来了。这个函数也可以用来做一些实列化的操作，类如拖拽，移动…。

  mounted(){
            console.log("mounted.....")
              console.log(this.msg,document.getElementById("title"))
          },

8.beforeUpdate这个就是在当组件和实列的数据更改了之后就会立即执行beforeUpdate这个钩子函数，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿。

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

9.updated他是在当组件和实列的数据更改了完成之后就会执行钩子函数updated，数据已经更改完成，dom也重新render完成，可以操作更新后的dom。当数据发生改变的时候，引发虚拟dom的对比，虚拟dom对比完成后，再去渲染真实的dom结构，当真实的dom结构渲染完成后，内部才会执行updated钩子函数。