vue组件生命周期
一个组件从 创建 到 销毁 的整个过程就是生命周期
生命周期函数(钩子函数)
vue 框架内置函数,随着组件的生命周期,自动按次序执行
作用:特定的时间点,执行某些特定的操作
场景: 组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据
阶段!!!:
● 初始化 → 创建组件 → beforeCreate 、created
● 挂载 → 渲染显示组件 → beforeMount 、mouted
● 更新 → 修改了变量 → 触发视图刷新 → beforeUpdate 、updated
● 销毁 → 切换页面 → 会把组件对象从内存删除 → beforeDestory 、destoryed
生命周期函数执行过程
components/Life.vue - 创建一个文件(复制代码,演示执行过程)
<template>
<div>
<ul id="myUl">
<li v-for="(item, ind) in arr" :key="ind">{{ item }}</li>
</ul>
<button
@click="arr.push(Math.random() * 10)"
>
增加一个元素
</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: "我是变量",
arr: [1, 2, 3, 4],
isShow: true,
}
},
beforeCreate () {
// 1. 创建前
console.log("beforeCreate --- 实例初始化前")
console.log(this.msg) // undefined
},
created () {
// 2. 创建后=> 发送ajax请求
console.log("created --- 实例初始化后")
console.log(this.msg) // "我是变量"
},
beforeMount () {
// 3. 挂载前
console.log("beforeMount --- vue的虚拟DOM, 挂载到真实的网页之前")
console.log(document.getElementById("myUl")) // null
// console.log(document.getElementById("myUl").children[1].innerHTML) // 报错
},
mounted () {
// 4. 挂载后=> 操作dom
console.log("mounted --- vue的虚拟DOM, 挂载到真实的网页上 ")
// console.log(document.getElementById("myUl").children[1].innerHTML)
console.log(document.querySelector('#myUl').children[1].innerText)
},
beforeUpdate () {
// 5. 更新前
console.log("beforeUpdate --- 数据更新, 页面更新前")
// 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
// console.log(document.getElementById("myUl").children[4].innerHTML) // 报错
},
updated () {
// 6. 更新后
console.log("updated --- 数据更新, 页面更新后")
console.log(document.getElementById("myUl").children[4].innerHTML)
},
beforeDestroy () {
// 7. 销毁前
// (清除定时器 / 解绑js定义的事件)
console.log("beforeDestroy --- 实例销毁之前调用")
},
destroyed () {
// 8. 销毁后
// (清除定时器 / 解绑js定义的事件)
console.log("destroyed --- 销毁完成")
},
};
</script>
<style>
</style>
注意(面试):
说明❓:如果有子孙组件的情况下,所有子孙组件mounted之后父组件才会执行mounted ; 所有父组件created之后子孙组件才会执行created
App.vue - 引入使用
<template>
<div>
<Life v-if="isShow"/>
<hr>
<button @click="isShow = !isShow">销毁Life组件</button>
</div>
</template>
<script>
import Life from './components/Life'
export default {
data(){
return {
isShow: true
}
},
components: {
Life
}
};
</script>
axios
axios介绍
● axios文档 是一个专门用于发送ajax请求的库
○ 支持客户端发送Ajax请求
○ 支持服务端Node.js发送请求
○ 支持Promise相关用法
○ 支持请求和响应的拦截器功能
○ 自动转换JSON数据
● axios 底层还是原生js实现, 内部通过Promise封装的
axios基本使用
// 1. 导入axios
import axios from 'axios'
// 2. 使用1
axios({
method: '请求方式', // get post
url: '请求地址',
data: { // 拼接到请求体的参数, post请求的参数
xxx: xxx,
},
params: { // 拼接到请求url的参数, get请求的参数
xxx: xxx
}
}).then(res => {
console.log(res.data) // 后台返回的结果
}).catch(err => {
console.log(err) // 后台报错返回
})
// 2. 使用2 async await
案例-图书演示
<template>
<div>
<div>
<h4>1. 查询所有图书信息</h4>
<button @click="allFn">查询-看控制台</button>
</div>
<div>
<h4>2. 查询某本图书信息</h4>
<input type="text" placeholder="输入要查询的书名" v-model="bookName" />
<button @click="selFn">查询-看控制台</button>
</div>
<div>
<h4>3. 新增图书信息</h4>
<input type="text" placeholder="书名" v-model="obj.bookname"/>
<input type="text" placeholder="作者" v-model="obj.author"/>
<input type="text" placeholder="出版社" v-model="obj.publisher"/>
</div>
<button @click="addFn">点击新增图书</button>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
bookName: "",
obj: {
bookname: "",
author: "",
publisher: ""
}
};
},
methods: {
allFn() {
axios({
method: "get",
url: "http://123.57.109.30:3006/api/getbooks",
}).then(function (res) {
console.log(res);
});
},
selFn() {
axios({
method: "get",
url: "http://123.57.109.30:3006/api/getbooks",
params: {
bookname: this.bookName,
},
}).then(function (res) {
console.log(res);
});
},
addFn(){
axios({
method: "POST",
url: "http://123.57.109.30:3006/api/addbook",
data: {
appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
...this.obj
}
}).then(res => {
console.log(res);
})
}
},
};
</script>
<style>
</style>
$refs使用
目标
掌握ref的使用,能用它获取dom元素或者组件实例
获取到原生dom标签
App.vue
<template>
<div>
<h1 ref="myH1">1. ref获取原生dom</h1>
<button @click="fn">点击修改上面内容</button>
</div>
</template>
<script>
export default {
methods: {
fn() {
console.log(this.$refs.myH1); // <h1></h1> 原生DOM标签
this.$refs.myH1.innerHTML = "改内容了";
}
}
}
</script>
nextTick使用
背景
数据变化而导致的dom更新是异步的
视图更新是异步的,数据改变后,视图不会立即更新,会将更新视图放在任务队列里等同步代码执行完后再执行
nextTick的作用是将代码放到视图更新后执行
基础示例
<template>
<div>
<p id="num">数字: {{ count }}</p>
<button @click="btn">点击+1, 观察打印</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
btn() {
this.count++; // 数字添加后, 异步更新DOM, 所以马上获取标签的值还是0
console.log(document.getElementById('num').innerHTML); // 0
}
},
};
</script>
应用场景
在js代码中,修改数据之后,希望随后拿到最新的dom。
<template>
<div>
<p id="num">数字: {{ count }}</p>
<button @click="btn">点击+1, 观察打印</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
btn() {
this.count++; // 数字添加后, 异步更新DOM, 所以马上获取标签的值还是0
console.log(document.getElementById('num').innerHTML); // 0
this.$nextTick(() => {
console.log("DOM更新后触发$nextTick函数");
console.log(document.getElementById('num').innerHTML); // 1
})
},
},
};
</script>
小结
dom是异步更新的, $nextTick可以等待dom更新后触发此方法
nextTick使用场景
目标: 点击搜索按钮, 显示聚焦的输入框, 按钮消失=》默认输入框不显示
<template>
<div>
<input type="text" placeholder="输入要搜索的关键字" v-if="isShow" ref="inp">
<button v-else @click="searchFn">点击搜索,出输入框并马上处于激活状态</button>
</div>
</template>
<script>
export default {
data(){
return {
isShow: false
}
},
methods: {
searchFn(){
this.isShow = true // 点击显示输入框, 隐藏按钮
// this.$refs.inp.focus() // 让输入框处于激活状态
// 发现报错了, this.$refs.inp是个undefined(没获取到dom标签)
// 因为数据isShow改变后, "异步"显示input, 而代码会继续往下走所以还没获取到input, 所以是undefined
// 解决: 在dom更新后, 会触发$nextTick里的回调函数
this.$nextTick(() => {
this.$refs.inp.focus();
})
}
}
}
</script>
扩展-$nextTick返回Promise对象
所以上面还可以改成如下写法
methods: {
async searchFn(){
this.isShow = true
await this.$nextTick()
this.$refs.inp.focus()
}
}