vue-生命周期·钩子函数

一. ⽣命周期

1. 什么是⽣命周期
   每个 Vue 实例在被创建时都要经过⼀系列的初始化过程。 例如：从
   开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新
   DOM、卸载等⼀系列过程。 我们称 这⼀系列的过程 就是Vue的⽣命
   周期。 通俗说就是Vue实例从创建到销毁的过程，就是⽣命周期。 同
   时在这个过程中也会运⾏⼀些叫做⽣命周期钩⼦的函数，这给了⽤户
   在不同阶段添加⾃⼰的代码的机会，利⽤各个钩⼦来完成我们的业务

2 ⽣命周期钩⼦ 函数
1)beforCreate
实例初始化之后、创建实例之前的执⾏的钩⼦事件
创建实例之前，数据观察和事件配置都没好准备好。也就是数据 也没有、DOM也没⽣成

2)created
实例创建完成后执⾏的钩⼦
实例创建完成后，我们能读取到数据data的值，但是DOM还没⽣成,可以在此时发起ajax

3)beforeMount
将编译完成的html挂载到对应的虚拟DOM时触发的钩⼦ 此时页面并 没有内容。 即此阶段 解读为: 即将挂载
4)mounted DOM挂载完成

5)beforeUpdate 在更新DOM之前 调⽤该钩⼦,有事件介入时
6)updated 在更新DOM之后调⽤该钩⼦，应⽤：可以获取最新的DOM

7)beforeDestroy 销毁前
8)destroyed 销毁后
ps:当销毁后在重新载入时会重新触发 创建函数

9)Activated 激活前
10)deactivated 激活后
Ps:当配合vue的内置组件 ⼀起使⽤的时候,才会生效,在重新激活时不会触发创建函数

二. ref属性
类似于DOM中的id属性,可以方便的添加事件与获取组件

利用$refs 可以获取到绑定属性的 rel

如果绑定元素为标签,获取的为dom节点
如果绑定元素为组件,获取的为组件

可以利用ref 更好的实现子传父 父传子的传值

三. nextTick使用?
Vue中的Dom改变为异步执行,当需要调取最新的dom改变时,需要使用nextTick回调
Vue.$el获取dom节点

例: Vue.nextTick(()=>{
Console.log(Vue.$el.innerHtml)
})