Vue基础学习笔记Day05_生命周期_axios_vue使用生命周期函数mounted()完成axios数据请求,请求文件为student.json,

今日目标:

1. 能够说出vue组件生命周期
2. 能够掌握axios的使用
3. 能够了解refs, nextTick使用和name使用

---

学习内容：

学习目录:

1. Vue生命周期
2. axios
3. nextTick和refs知识
4. 今日总结
5. 面试题

知识点自测

• 知道window.onload的作用
• ajax是什么, XMLHttpRequest的使用步骤
• jQ的 $.ajax底层是什么?
• Promise的作用
• async和await的作用-如何和Promise配合
• 同步异步的概念, 代码执行顺序
• 请求和响应, 以及JSON解析能力
• Vue基础, 组件使用, props传值, 组件通信, 计算属性使用, 对象引用类型使用

1. vue生命周期

1.0_组件-生命周期

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

Vue的生命周期是什么?

1. 从Vue实例, 创建到销毁的过程

1.1_钩子函数

目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行

PS：这些函数，被称为声明周期函数，也叫钩子函数

• 作用: 特定的时间点，执行特定的操作
• 场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据
• 分类: 4大阶段8个方法
  • 初始化
  • 挂载
  • 更新
  • 销毁
• 具体方法：

• mount：挂载
• destory：销毁
• 官方文档

1. 如何知道Vue生命周期到达了什么阶段?
   1. 使用钩子函数
2. 钩子函数有哪些?
   1. 初始化/ 挂载/ 更新/ 销毁

1.2_初始化阶段

目标: 掌握初始化阶段2个钩子函数作用和执行时机

含义讲解:

1. new Vue() – Vue实例化(组件也是一个小的Vue实例)

2. Init Events & Lifecycle – 初始化事件和生命周期函数

3. beforeCreate – 生命周期钩子函数被执行

4. Init injections&reactivity – Vue内部添加data和methods等

5. created – 生命周期钩子函数被执行, 实例创建

6. 接下来是编译模板阶段 –开始分析

7. Has el option? – 是否有el选项 – 检查要挂到哪里

   没有. 调用$mount()方法

   有, 继续检查template选项

• 接下来，练习：
• 创建一个文件：components/Life.vue

<script>
export default {
    data(){
        return {
            msg: "hello, Vue"
        }
    },
    // 一. 初始化
    // new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"
    beforeCreate(){
        console.log("beforeCreate -- 执行");
        console.log(this.msg); // undefined，PS：data还没有初始化，所以是undefined
    },
    // data和methods初始化以后
    // 场景: 网络请求, 注册全局事件   ****
    created(){
        console.log("created -- 执行");
        console.log(this.msg); // hello, Vue
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

App.vue - 引入使用

<template>
  <div>
    <h1>1. 生命周期</h1>
 	<Life></Life>
  </div>
</template>

<script>
import Life from './components/Life'
export default {
  components: {
    Life
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1. Vue实例从创建到编译模板执行了哪些钩子函数?
   1. beforeCreate / created
2. created函数触发能获取data?
   1. 能获取data, 不能获取真实DOM（PS：此时只是实例化了Vue，此时界面还没有编译渲染）

1.3_挂载阶段

目标: 掌握挂载阶段2个钩子函数作用和执行时机

含义讲解:

1. template选项检查

   有 - 编译template返回render渲染函数

   无 – 编译el选项对应标签作为template(要渲染的模板)

2. 虚拟DOM挂载成真实DOM之前

3. beforeMount – 生命周期钩子函数被执行

4. Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5. 真实DOM挂载完毕

6. mounted – 生命周期钩子函数被执行

• 接下来，开始练习：
• 在components/Life.vue 中继续书写：

<template>
  <div>
      <p>学习生命周期 - 看控制台打印</p>
      <p id="myP">{{ msg }}</p>
  </div>
</template>

<script>
export default {
    // ...省略其他代码
    
    // 二. 挂载
    // 真实DOM挂载之前
    // 场景: 预处理data, 不会触发updated钩子函数（先了解，有印象即可）
    beforeMount(){
        console.log("beforeMount -- 执行");
        console.log(document.getElementById("myP")); // null

        this.msg = "重新值"
    },
    // 真实DOM挂载以后
    // 场景: 可以操作DOM****
    mounted(){
        console.log("mounted -- 执行");
        console.log(document.getElementById("myP")); // p
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

1. Vue实例从创建到显示都经历了哪些钩子函数?
   1. beforeCreate / created / beforeMount / mounted
2. created函数里, 能获取真实DOM吗?
   1. 不能获取真实DOM
3. 在什么钩子函数里可以获取真实DOM?
   1. mounted

1.4_更新阶段

目标: 掌握更新阶段2个钩子函数作用和执行时机

含义讲解:

1. 当data里数据改变, 更新DOM之前

2. beforeUpdate – 生命周期钩子函数被执行

3. Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4. updated – 生命周期钩子函数被执行

5. 当有data数据改变 – 重复这个循环

• 在components/Life.vue中继续书写：

• 准备ul+li循环, 按钮添加元素, 触发data改变->导致更新周期开始

<template>
  <div>
      <p>学习生命周期 - 看控制台打印</p>
      <p id="myP">{{ msg }}</p>
      <ul id="myUL">
          <li v-for="(val, index) in arr" :key="index">
              {{ val }}
          </li>
      </ul>
      <button @click="arr.push(1000)">点击末尾加值</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            msg: "hello, Vue",
            arr: [5, 8, 2, 1]
        }
    },
    // ...省略其他代码

    // 三. 更新
    // 前提: data数据改变才执行
    // 更新之前
    beforeUpdate(){
        console.log("beforeUpdate -- 执行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // undefined，无法获取更新之后的dom
    },
    // 更新之后
    // 场景: 获取更新后的真实DOM
    updated(){
        console.log("updated -- 执行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // li
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

1. 什么时候执行updated钩子函数?
   1. 当数据发生变化并更新页面后
2. 在哪可以获取更新后的DOM?
   1. 在updated钩子函数里

1.5_销毁阶段

目标: 掌握销毁阶段2个钩子函数作用和执行时机

含义讲解:

1. 当$destroy()被调用 – 比如组件DOM被移除(例v-if)

2. beforeDestroy – 生命周期钩子函数被执行

3. 拆卸数据监视器、子组件和事件侦听器

4. 实例销毁后, 最后触发一个钩子函数

5. destroyed – 生命周期钩子函数被执行

<script>
export default {
    // ...省略其他代码
    
    // 四. 销毁
    // 前提: v-if="false" 销毁Vue实例
    // 场景: 移除全局事件, 移除当前组件, 计时器, 定时器, eventBus移除事件$off方法
    beforeDestroy(){
        // console.log('beforeDestroy -- 执行');
        clearInterval(this.timer)
    },
    //场景: 移除全局事件, 移除当前组件, 计时器, 定时器, eventBus移除事件$off方法
    destroyed(){
        // console.log("destroyed -- 执行");
        clearInterval(this.timer);
    	console.log(this);// 在这里依然可以访问到this，此时thisvue对象还没有被销毁
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

主要: App.vue - 点击按钮让Life组件从DOM上移除 -> 导致Life组件进入销毁阶段

<Life v-if="show"></Life>
<button @click="show = false">销毁组件</button>

<script>
    data(){
        return {
            show: true
        }
    },
</script>
1
2
3
4
5
6
7
8
9
10

一般在beforeDestroy/destroyed里做什么?

1. 手动消除计时器/定时器/全局事件

2. axios

2.0_axios基本使用

• [axios文档](http://www.axios-js.com/)
• 特点
  • 支持客户端发送Ajax请求
  • 支持服务端Node.js发送请求
  • 支持Promise相关用法
  • 支持请求和响应的拦截器功能
  • 自动转换JSON数据
  • axios 底层还是原生js实现, 内部通过Promise封装的

安装命令

yarn add axios
1

• axios的基本使用：语法

axios({
  method: '请求方式', // get获取 post添加 put修改 delete删除
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数
   	xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1. 什么是ajax?
   1. 一种前端异步请求后端的技术
2. ajax原理?
   1. 浏览器window接口的XMLHttpRequest
3. axios是什么?
   1. 基于原生ajax+Promise技术封装通用于前后端的请求库

2.1_axios基本使用-获取数据

目标: 调用文档最后_获取所有图书信息接口

• 功能: 点击调用后台接口, 拿到所有数据 – 打印到控制台

• 接口: 看本文档最后：接口文档

• 引入: 下载axios, 引入后才能使用

• 例子如下:

• components/UseAxios.vue

<template>
  <div>
    <p>1. 获取所有图书信息</p>
    <button @click="getAllFn">点击-查看控制台</button>
  </div>
</template>

<script>
// 目标1: 获取所有图书信息
// 1. 下载axios
// 2. 引入axios
// 3. 发起axios请求
import axios from "axios";
export default {
  methods: {
    getAllFn() {
      axios({
        url: "http://xxxx",
        method: "GET", // 默认就是GET方式请求, 可以省略不写
      }).then((res) => {
        console.log(res);
      });
      //PS： axios()-原地得到Promise对象，Promise对象可以调用then方法
    },
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

1. axios如何发起一次get请求?
   1. 在method选项配置为get/ 也可以默认不写
2. axios函数调用原地结果是什么?
   1. 是一个Promise对象
3. 如何拿到Promise里ajax的成功或失败的结果?
   1. then() / catch()

2.2_axios基本使用-传参

目标: 调用接口-获取某本书籍信息

• 功能: 点击调用后台接口, 查询用户想要的书籍信息 – 打印到控制台
• 例子如下:
• components/UseAxios.vue

<template>
  <div>
    <p>3. 新增图书信息</p>
    <div>
        <input type="text" placeholder="书名" v-model="bookObj.bookname">
    </div>
    <div>
        <input type="text" placeholder="作者" v-model="bookObj.author">
    </div>
    <div>
        <input type="text" placeholder="出版社" v-model="bookObj.publisher">
    </div>
    <button @click="sendFn">发布</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      bName: "",
      bookObj: { // 参数名提前和后台的参数名对上-发送请求就不用再次对接了
          bookname: "",
          author: "",
          publisher: ""
      }
    };
  },
  methods: {
    // ...省略了其他代码
    sendFn(){
       axios({
           url: "http://xxxx",
           method: "POST",
           data: {
               appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
               ...this.bookObj //扩展运算符，等同于拆包，给对象里的key，value拆出来
            // 等同于下面
            // bookname: this.bookObj.bookname,
            // author: this.bookObj.author,
            // publisher: this.bookObj.publisher
           }
       }) 
    }
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

1. post请求方式, 一般在哪里传递数据给后台?
   1. 请求体中
2. axios哪个选项, 可以把参数自动装入到请求体中?
   1. data选项
3. axios默认发给后台请求体数据格式是?
   1. json字符串格式

2.4_axios基本使用-全局配置

目标: 避免前缀基地址, 暴露在逻辑页面里, 统一设置

axios.defaults.baseURL = "http://xxxx."

// 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面
getAllFn() {
    axios({
        url: "/api",
        method: "GET", // 默认就是GET方式请求, 可以省略不写
    }).then((res) => {
        console.log(res);
    });
    // axios()-原地得到Promise对象
},
1
2
3
4
5
6
7
8
9
10
11
12

1. 想学习axios更多的知识应该去哪里?
   1. 官网多阅读, 多看多总结, 任何库和插件都是
2. axios如何配置基地址?
   1. axios.defaults.baseURL

3. nextTick和refs知识

3.0 $refs-获取DOM ***

目标: 利用 id 或 ref 可以用于获取 dom 元素

• 虽然vue的语法尽量的避免Dom操作，但是有情况还得获取到dom元素对象

• PS：

  • 给标签添加ref属性之后，vue内部会自动获取到此标签的dom对象，并放入$refs对象中
  • ref：reference，引用，在这里我们把引用，理解为对象即可。（引用对象，实例对象）
  • ref="myH1"相当于是给h1的对象起了个名字叫myH1
  • 所以，可以通过this.$refs.myH1找到h1标签

• components/More.vue

<template>
  <div>
      <p>1. 获取原生DOM元素</p>
      <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>
  </div>
</template>

<script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
export default {
    mounted(){
        console.log(document.getElementById("h")); // h1
        console.log(this.$refs.myH); // h1
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

总结: 通过id / ref, 都可以获取原生DOM标签

Vue中如何获取原生DOM呢?

1. 用id属性或者ref属性都可以 this.$refs.ref属性值

3.1 $refs-获取组件对象

目标: 通过ref获取组件对象, 调用组件里方法

• 具体操作：
• 新建：components/Child/Demo.vue

<template>
  <div>
      <p>我是Demo组件</p>
  </div>
</template>

<script>
export default {
    methods: {
        fn(){
            console.log("demo组件内的方法被调用了");
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

More.vue - 获取组件对象 - 调用组件方法

<template>
  <div>
      <p>1. 获取原生DOM元素</p>
      <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>
      <p>2. 获取组件对象 - 可调用组件内一切</p>
      <Demo ref="de"></Demo>
  </div>
</template>

<script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
import Demo from './Child/Demo'
export default {
    mounted(){
        console.log(document.getElementById("h")); // h1
        console.log(this.$refs.myH); // h1

        let demoObj = this.$refs.de;
        demoObj.fn()
    },
    components: {
        Demo
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

总结: ref定义值, 通过$refs.值 来获取组件对象, 就能继续调用组件内的变量
PS：

1. let和var是声明变量的,const是声明常量的
2. let和const不存在变量提升
3. let和const不允许重复声明

如何获取组件对象呢?

• 目标组件添加ref属性
• this.$refs.名字获取组件对象

拿到组件对象能做什么?

• 调用组件里的属性/方法

3.2 $nextTick使用

目标: 点击修改data里的数据，立马通过DOM元素获取修改后的内容

• 具体操作：
• components/Move.vue

<template>
  <div>
      <p>1. 获取原生DOM元素</p>
      <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>
      <p>2. 获取组件对象 - 可调用组件内一切</p>
      <Demo ref="de"></Demo>
      <p>3. vue更新DOM是异步的</p>
      <p ref="myP">{{ count }}</p>
      <button @click="btn">点击count+1, 马上提取p标签内容</button>
  </div>
</template>

<script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
import Demo from './Child/Demo'
export default {
    mounted(){
        console.log(document.getElementById("h")); // h1
        console.log(this.$refs.myH); // h1

        let demoObj = this.$refs.de;
        demoObj.fn()
    },
    components: {
        Demo
    },
    data(){
        return {
            count: 0
        }
    },
    methods: {
        btn(){
            this.count++; // vue监测数据更新, 开启一个DOM更新队列(异步任务)
            console.log(this.$refs.myP.innerHTML); // 0

            // 原因: Vue更新DOM异步
            // 解决: this.$nextTick()
            // 过程: DOM更新完会挨个触发$nextTick里的函数体
             this.$nextTick(() => {
                console.log(this.$refs.myP.innerHTML); // 1
            })
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

总结: 因为DOM更新是异步的

1. data改变更新DOM是同步还是异步的?
   1. 异步
2. 我们可以在哪里访问到更新后的DOM呢?
   1. this.$nextTick里的函数体
   2. updated生命周期钩子函数

3.3 $nextTick使用场景

目标: 点击搜索按钮自身隐藏，出现输入框并马上处于激活状态

• 注意：一定要用v-if来写，保证DOM异步更新前获取不到输入框，提醒$nextTick价值
• 如果使用v-show，那么v-show控制的标签，在界面加载的时候已经在dom上了，只是控制显示隐藏
• 控制显示隐藏的速度是很快的，v-if是控制标签，挂载到dom并且显示，速度比较慢
• 所以，v-if才会有延迟的效果，我们才需要使用$nextTick
• v-show，也得通过$nextTick来等待
• 具体操作：
• 新建：components/Tick.vue

<template>
  <div>
      <input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow">
      <button v-else @click="btn">点击我进行搜索</button>
  </div>
</template>

<script>
// 目标: 点按钮(消失) - 输入框出现并聚焦
// 1. 获取到输入框
// 2. 输入框调用事件方法focus()达到聚焦行为
export default {
    data(){
        return {
            isShow: false
        }
    },
    methods: {
        //注意函数内使用await，需要添加async
        async btn(){
            this.isShow = true;
            // this.$refs.myInp.focus() //PS：会报错，myInp是undefined
            // 原因: data变化更新DOM是异步的
            // 输入框还没有挂载到真实DOM上
            // 解决:
            // this.$nextTick(() => {
            //     this.$refs.myInp.focus()
            // })
            // 扩展: await取代回调函数
            // $nextTick()原地返回Promise对象
            await this.$nextTick() //等待执行完毕之后，再获取焦点
            this.$refs.myInp.focus()
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

1. $nextTick函数原地返回什么?
   1. Promise对象
2. 如何在JS中主动触发标签的事件呢?
   1. 获取到DOM对象, 调用事件方法

3.4 组件name属性使用

目标: 可以用组件的name属性值, 来注册组件名字

• PS:

• 之前注册组件的时候，：前边的组件名是我们自己随便写的，现在我们想用人家自己的名字

• ComName.name即为：“ComNameHaHa”

• 问题: 组件名不是可以随便写的?

• 答案: 我们封装的组件-可以自己定义name属性组件名-让使用者有个统一的前缀风格

• 具体操作：

• 新建：components/Com.vue

<template>
  <div>
      <p>我是一个Com组件</p>
  </div>
</template>

<script>
export default {
    name: "ComNameHaHa" // 注册时可以定义自己的名字
}
</script>
1
2
3
4
5
6
7
8
9
10
11

App.vue - 注册和使用

<template>
  <div>
    <h1>1. 生命周期</h1>
    <Life v-if="show"></Life>
    <button @click="show = false">销毁组件</button>
    <hr>
    <h1>2. axios使用</h1>
    <UseAxios></UseAxios>
    <hr>
    <h1>3. $refs的使用</h1>
    <More></More>
    <hr>
    <h1>4. $nextTick使用场景</h1>
    <Tick></Tick>
    <hr>
    <h1>5. 组件对象里name属性</h1>
    <ComNameHaHa></ComNameHaHa>
  </div>
</template>

<script>
import Life from './components/Life'
import UseAxios from './components/UseAxios'
import More from './components/More'
import Tick from './components/Tick'
import Com from './components/Com'
export default {
  data(){
    return {
      show: true
    }
  },
  components: {
    Life,
    UseAxios,
    More,
    Tick,
    //以下注册写法都可以
   // Tick: Tick,
   //"Tick": Tick, //将vetur禁用掉们才能添加成功
    [Com.name]: Com // 对象里的key是变量的话[]属性名表达式
    //相当于：
    //"ComNameHaHa": Com
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

1. 组件使用分为几步?
   1. 创建组件/ 引入组件/ 注册组件/ 使用组件
2. 注册组件名还可以用什么?
   1. 用组件对象的name属性的值

今日总结

vue的生命周期哪4个阶段, 哪8个方法（created ,mounted）

axios是什么, 底层是什么, 具体如何使用

axios返回的是什么, 如何接收结果

知道ref和$refs使用和作用以及场景®

知道$nextTick的作用

面试题

1、Vue 的 nextTick 的原理是什么? （高薪常问）

\1. 为什么需要 nextTick ，Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

\2. 理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;

\3. 理解 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。
1
2
3
4
5

2、vue生命周期总共分为几个阶段？（必会）

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1**）beforeCreate**

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

2**）created**

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

3**）beforeMount**

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

4**）mounted**

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

5**）beforeUpdate**

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

6**）updated**

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

7**）activated**

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

8**）deactivated**

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

9**）beforeDestroy**

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

10**）destroyed**

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

11**）errorCaptured（2.5.0+ 新增）**

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

3、第一次加载页面会触发哪几个钩子函数？（必会）

当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数