今日目标:
- 能够说出vue组件生命周期
- 能够掌握axios的使用
- 能够了解refs, nextTick使用和name使用
学习内容：
学习目录:
知识点自测
- 知道window.onload的作用
- ajax是什么, XMLHttpRequest的使用步骤
- jQ的 $.ajax底层是什么?
- Promise的作用
- async和await的作用-如何和Promise配合
- 同步异步的概念, 代码执行顺序
- 请求和响应, 以及JSON解析能力
- Vue基础, 组件使用, props传值, 组件通信, 计算属性使用, 对象引用类型使用
1. vue生命周期
1.0_组件-生命周期
- 一组件从 创建 到 销毁 的整个过程就是生命周期
Vue的生命周期是什么?
- 从Vue实例, 创建到销毁的过程
1.1_钩子函数
目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行
PS：这些函数，被称为声明周期函数，也叫钩子函数
- 作用: 特定的时间点，执行特定的操作
- 场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据
- 分类: 4大阶段8个方法
- 初始化
- 挂载
- 更新
- 销毁
- 具体方法：
| 阶段 | 方法名 | 方法名 |
|---|---|---|
| 初始化 | beforeCreate | created |
| 挂载 | beforeMount | mounted |
| 更新 | beforeUpdate | updated |
| 销毁 | beforeDestroy | destroyed |
- mount：挂载
- destory：销毁
- 官方文档
- 如何知道Vue生命周期到达了什么阶段?
- 使用钩子函数
- 钩子函数有哪些?
- 初始化/ 挂载/ 更新/ 销毁
1.2_初始化阶段
目标: 掌握初始化阶段2个钩子函数作用和执行时机
含义讲解:
-
new Vue() – Vue实例化(组件也是一个小的Vue实例)
-
Init Events & Lifecycle – 初始化事件和生命周期函数
-
beforeCreate – 生命周期钩子函数被执行
-
Init injections&reactivity – Vue内部添加data和methods等
-
created – 生命周期钩子函数被执行, 实例创建
-
接下来是编译模板阶段 –开始分析
-
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>
App.vue - 引入使用
<template>
<div>
<h1>1. 生命周期</h1>
<Life></Life>
</div>
</template>
<script>
import Life from './components/Life'
export default {
components: {
Life
}
}
</script>
- Vue实例从创建到编译模板执行了哪些钩子函数?
- beforeCreate / created
- created函数触发能获取data?
- 能获取data, 不能获取真实DOM（PS：此时只是实例化了Vue，此时界面还没有编译渲染）
1.3_挂载阶段
目标: 掌握挂载阶段2个钩子函数作用和执行时机
含义讲解:
-
template选项检查
有 - 编译template返回render渲染函数
无 – 编译el选项对应标签作为template(要渲染的模板)
-
虚拟DOM挂载成真实DOM之前
-
beforeMount – 生命周期钩子函数被执行
-
Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上
-
真实DOM挂载完毕
-
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>
- Vue实例从创建到显示都经历了哪些钩子函数?
- beforeCreate / created / beforeMount / mounted
- created函数里, 能获取真实DOM吗?
- 不能获取真实DOM
- 在什么钩子函数里可以获取真实DOM?
- mounted
1.4_更新阶段
目标: 掌握更新阶段2个钩子函数作用和执行时机
含义讲解:
-
当data里数据改变, 更新DOM之前
-
beforeUpdate – 生命周期钩子函数被执行
-
Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM
-
updated – 生命周期钩子函数被执行
-
当有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>
- 什么时候执行updated钩子函数?
- 当数据发生变化并更新页面后
- 在哪可以获取更新后的DOM?
- 在updated钩子函数里
1.5_销毁阶段
目标: 掌握销毁阶段2个钩子函数作用和执行时机
含义讲解:
-
当$destroy()被调用 – 比如组件DOM被移除(例v-if)
-
beforeDestroy – 生命周期钩子函数被执行
-
拆卸数据监视器、子组件和事件侦听器
-
实例销毁后, 最后触发一个钩子函数
-
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>
主要: App.vue - 点击按钮让Life组件从DOM上移除 -> 导致Life组件进入销毁阶段
<Life v-if="show"></Life>
<button @click="show = false">销毁组件</button>
<script>
data(){
return {
show: true
}
},
</script>
一般在beforeDestroy/destroyed里做什么?
- 手动消除计时器/定时器/全局事件
2. axios
2.0_axios基本使用
[axios文档](http://www.axios-js.com/)- 特点
- 支持客户端发送Ajax请求
- 支持服务端Node.js发送请求
- 支持Promise相关用法
- 支持请求和响应的拦截器功能
- 自动转换JSON数据
- axios 底层还是原生js实现, 内部通过Promise封装的
安装命令
yarn add axios
- 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) // 后台报错返回
})
- 什么是ajax?
- 一种前端异步请求后端的技术
- ajax原理?
- 浏览器window接口的XMLHttpRequest
- axios是什么?
- 基于原生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>
- axios如何发起一次get请求?
- 在method选项配置为get/ 也可以默认不写
- axios函数调用原地结果是什么?
- 是一个Promise对象
- 如何拿到Promise里ajax的成功或失败的结果?
- 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>
- post请求方式, 一般在哪里传递数据给后台?
- 请求体中
- axios哪个选项, 可以把参数自动装入到请求体中?
- data选项
- axios默认发给后台请求体数据格式是?
- 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对象
},
- 想学习axios更多的知识应该去哪里?
- 官网多阅读, 多看多总结, 任何库和插件都是
- axios如何配置基地址?
- 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>
总结: 通过id / ref, 都可以获取原生DOM标签
Vue中如何获取原生DOM呢?
- 用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>
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>
总结: ref定义值, 通过$refs.值 来获取组件对象, 就能继续调用组件内的变量
PS：
- let和var是声明变量的,const是声明常量的
- let和const不存在变量提升
- 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>
总结: 因为DOM更新是异步的
- data改变更新DOM是同步还是异步的?
- 异步
- 我们可以在哪里访问到更新后的DOM呢?
- this.$nextTick里的函数体
- 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>
- $nextTick函数原地返回什么?
- Promise对象
- 如何在JS中主动触发标签的事件呢?
- 获取到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>
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>
- 组件使用分为几步?
- 创建组件/ 引入组件/ 注册组件/ 使用组件
- 注册组件名还可以用什么?
- 用组件对象的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 开发团队的深思熟虑，对性能的良苦用心。
2、vue生命周期总共分为几个阶段？（必会）
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
1**）beforeCreate**
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2**）created**
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
3**）beforeMount**
在挂载开始之前被调用：相关的 render 函数首次被调用。
4**）mounted**
el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
5**）beforeUpdate**
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
6**）updated**
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
7**）activated**
keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
8**）deactivated**
keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
9**）beforeDestroy**
实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
10**）destroyed**
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
11**）errorCaptured（2.5.0+ 新增）**
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
3、第一次加载页面会触发哪几个钩子函数？（必会）
当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数
1918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
