Vue

生命周期

概念

组件从创建到销毁的整个过程就是生命周期。

钩子函数

作用：在特定时间节点执行特定的操作。

阶段	方法名	方法名
初始化	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeDestroy	destroyed

初始化阶段

1. 实例化 Vue 对象，初始化事件和生命周期函数。
2. 生命周期函数钩子 beforeCreate 被执行。

   此时函数 beforeCreate 获取不到数据。

3. Vue 内部添加数据 data 和函数方法 methods 等。
4. 生命周期函数钩子 created 被执行。

   此时函数 created 能够拿到数据并输出了，但是不能获取真实 dom 节点。一般在这里发送ajax请求。

5. 编译分析。

beforeCreate () {
  console.log('beforeCreate',this.msg);
},
created () {
  console.log('created',this.msg);
  console.log('created',document.querySelector('h1'));
}

挂载阶段

1. 检查 template 选项。
2. 虚拟 dom 准备挂载到真实 dom 。
3. 生命周期函数钩子 beforeMount 被执行。

   此时仅仅是找到模板，渲染模板之前的钩子函数，真实 dom 还未挂载，依旧获取不到真实 dom 。

4. 把虚拟 dom 和渲染的数据一并挂载到真实 dom 上。
5. 真实 dom 挂载完毕，生命周期函数钩子 mounted 被执行。

   现在可以获取到真实 dom 了，可以操作 dom ，也可以发起 ajax 请求，请求初始数据。

beforeMount () {
  console.log('beforeMount',document.querySelector('h1'));
},
mounted () {
  console.log('mounted',document.querySelector('h1'));
}

更新阶段

1. 在 data 数据改变、 dom 更新之前。
2. 生命周期函数钩子 beforeUpdate 被执行。

   发生在 dom 数据改变前，此时拿到的还是老数据。

3. 虚拟 dom 重新渲染，打补丁到真实 dom 。
4. 生命周期函数钩子 updated 被执行。

   发生在 dom 数据改变后，此时可以拿到新数据了。

5. 当 data 数据改变时，重复这个循环。

beforeUpdate () {
  console.log('beforeUpdate',document.querySelector('h1').innerHTML);
},
updated () {
  console.log('updated',document.querySelector('h1').innerHTML);
}

销毁阶段

1. 方法 $destroy() 被调用后（比如 v-if 移除 dom 节点），执行 beforeDestroy 生命周期钩子函数。

   这个钩子主要作用是用来清除定时器或全局事件的。当我们销毁组件时，是不会销毁定时器的，需要我们手动销毁定时器。

2. 拆卸定时器、计时器、事件侦听器。
3. 实例销毁后，生命周期函数钩子 destroyed 被执行。

axios

nextTick 和 refs

$refs

作用

1. 利用 ref 和 refs 获取到 dom 元素。
2. 利用 $refs 获取组件对象。

总结：

ref 定义值，通过 $refs 来获取组件对象，就能继续调用组件内的变量。

nextTick

前提：

在 Vue 中更新 dom 是异步的。如果马上通过原生 dom 拿标签的方式肯定拿不到更新后的值。