vue组件的生命周期及相关的几个钩子函数

Vue 生命周期总共分为几个阶段？有多少个钩子函数？

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模

板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1、beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

//_data未代理数据以及不能看到相关methods的相关方法
//（有本身相关的方法和属性）

beforeCreate() {
 console.log(this.kan)//undefined
 console.log("我是beforeCreate",this.count)//undefined
 },
     
//在数据观测和初始化事件还未开始,data、watcher、methods都还不存在,
//但是$route已存在,可以根据路由信息进行重定向等操作。

2、created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见

//差了挂载，其他已经准备完毕
created() {
     //可以在这里接受ajax/axios的数据
   console.log(this.kan)//kan的函数
   console.log("我是created",this.count)//可以打印出来值
   },
       

3、beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用

//此时的页面呈现的是未经编译的Dom结构
//此时对dom进行修改没有效果
//开始挂载的相关的render函数

//将HTML解析生成AST节点,再根据AST节点动态生成渲染函数。
//相关render函数首次被调用(划重点)。

4、mounted

el 被新创建的 vm.$el替换，并挂载到实例上去之后调用该钩子，如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el 也在文档内

//可以在这里接受ajax/axios的数据
console.log(this);//有$el  ($el: div.box)

//在挂载完成之后被调用,执行render函数生成虚拟dom,创建真实dom替换虚拟dom,并挂载到实例。
可以操作dom,比如事件监听

5、beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器，该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行

 vm.data更新之后,虚拟dom重新渲染之前被调用。
   在这个钩子可以修改vm.data更新之后,虚拟dom重新渲染之前被调用。
   在这个钩子可以修改vm.data,并不会触发附加的冲渲染过程。

6、updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子

//虚拟dom重新渲染后调用,若再次修改$vm.data,会再次触发beforeUpdate、updated,进入死循环。

7、activated

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用

//当keep-alive被激活的时候，不管我们是否修改内容，也会保持相关内容

8、deactivated

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用

//当keep-alive不被被激活的时候，不管我们是否修改内容，不保持相关内容

{keep-alive//保持数据第一次创建时被缓存下来，这样就节约了内存，提高了效率
            Props

            include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
            exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
            max - 数字。最多可以缓存多少组件实例

            对应两个生命周期钩子
            activated   相关的组件激活keep-alive状态
            deactivated 相关的组件失活keep-alive状态
}

9、beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用

实例被销毁前调用,也就是说在这个阶段还是可以调用实例的。

10、destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用

实例被销毁后调用,所有的事件监听器已被移除,子实例被销毁

11、errorCaptured（2.5.0+ 新增）

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串，此钩子可以返回 false 以阻止该错误继续向上传播

//errorCaptured 钩子可以通过返回 false 来阻止错误继续向上传递。 即表示“这个错误已经被处理了，应当被忽略”，它将阻止其他的 errorCaptured 钩子或 app.config.errorHandler 因这个错误而被调用。 你可以在 errorCaptured () 中更改组件状态来为用户显示一个错误状态。