1.1-Vue生命周期钩子介绍
-
vue生命周期钩子官方文档:
-
官方文档图解介绍:生命周期图示
-
官方文档详细介绍:vue生命周期钩子介绍
-
-
==vue生命周期钩子介绍 : vue从创建到销毁过程中,会执行的一些回调函数 ==
-
钩子
: 一种回调函数-
例如
-
window.onload = function(){ dom加载完毕,外部资源加载完毕就执行 }
-
-
-
生命周期
: vue实例从出生到扑街的过程-
出生:
-
创建vue实例
-
创建data数据
-
创建el挂载点
-
将data数据渲染到el挂载点
-
-
扑街
-
vue实例被销毁
-
这里销毁不是指vue实例变成了null,而是指解除data与el的关联
-
说人话:修改了data,页面不会被渲染
-
-
-
-
-
-
==注意点==
-
根据官网文档介绍 : 每一个生命周期钩子中的this都是指向vue实例
-
所以,生命周期钩子
不能
是箭头函数
-
vue的生命周期钩子分为四大阶段,8个方法
初始化
挂载
更新
销毁
<template>
<div>
<p>我的名字是:{{ name }}</p>
<button @click="doClick">点我改名字</button>
</div>
</template>
<script>
export default {
//数据
data () {
return {
name: 'ikun'
}
},
//事件
methods: {
doClick () {
this.name = '黑马李宗盛'
}
},
//生命周期钩子
//1. vue实例创建了,但是el和data还没有创建 (准备创建data)
beforeCreate () {
console.log(this)
console.log(1)
},
//2. data数据创建了,但是el挂载点还没有创建 (准备创建el)
created () {
console.log(this)
console.log(2)
},
//3. el挂载点创建了,但是data数据还没有渲染(准备渲染中)
beforeMount () {
console.log(this)
console.log(3)
},
//4. data数据 第一次 渲染完毕 (完成初始渲染)
mounted () {
console.log(this)
console.log(4)
},
//5. 检测到data数据变化,但是还没有开始重新渲染 (data变了,准备重新渲染中)
beforeUpdate () {
console.log(this)
console.log(5)
},
//6. 变化后的data数据 ,完成渲染到页面 (完成重新渲染)
updated () {
console.log(this)
console.log(6)
},
//7. vue实例销毁即将销毁
/* 什么时候会执行这个钩子?
销毁vue实例 : app.$destory() 例如v-if指令会让组件DOM被移除
这行代码不是移除vue,而是解除data与el的关联
说人话: 调用了app.$destory()之后,修改data,页面不会被渲染
*/
beforeDestroy () {
console.log(this)
console.log(7)
},
//8. vue实例已经销毁
destroyed () {
console.log(this)
console.log(8)
}
}
</script>
<style></style>
1.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选项
-
1.beforeCreate钩子
-
这个钩子几乎不怎么用
-
初始化vue实例
-
初始化事件(不是页面点击事件哈,就是vue本身自带的一些事件)
-
初始化声明周期函数
-
-
2.created
-
这个钩子非常重要
-
经典应用 : 页面一加载, ajax请求数据渲染页面。一般写在这个钩子里面
-
-
初始化data中数据
-
初始化methods里面的方法
-
1.3-挂载阶段
1.template选项检查
有 - 当前vue环境是脚手架, webpack就会编译.vue文件
没有- 当前vue环境是html环境
2.虚拟DOM挂载成真实DOM之前
3.beforeMount – 生命周期钩子函数被执行
4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上
5.真实DOM挂载完毕
6.mounted – 生命周期钩子函数被执行
-
3.beforeMount
-
这个钩子不常用
-
根据你的vue代码环境(html环境与脚手架环境),来编译模板html结构
-
完成el挂载点加载(生成虚拟DOM)
-
-
4.mounted
-
这个钩子很重要
-
这个钩子是最早可以获取页面DOM元素的钩子
-
-
虚拟DOM和渲染的数据一并挂到真实DOM上
-
1.4-更新阶段
1.当data里数据改变, 更新DOM之前
2.beforeUpdate – 生命周期钩子函数被执行
3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM
4.updated – 生命周期钩子函数被执行
5.当有data数据改变 – 重复这个循环
这两个钩子会执行多次,只要data中数据变化了,就会执行
-
5.beforeUpdate
-
这个钩子用的不是较多
-
检测data数据变化, 修改虚拟DOM
-
-
6.updated
-
这个钩子用的不是较多
-
完成data渲染(将虚拟DOM渲染成真实DOM)
-
1.5-销毁阶段
1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)
2.beforeDestroy – 生命周期钩子函数被执行
3.拆卸数据监视器、子组件和事件侦听器
4.实例销毁后, 最后触发一个钩子函数
5.destroyed – 生命周期钩子函数被执行
-
7.beforeDestroy
-
这个钩子有些场景会用到
-
例如在这个钩子里面移除定时器clearInterval()
-
-
这个钩子准备移除你的组件
-
移除数据监视器,侦听器等
-
-
8.destroyed
-
这个钩子几乎不怎么用,因为已经GG了,一切都晚了
-
Vue使用axios( Vue 全家桶02)
-
axios官网:axios中文文档|axios中文网 | axios
axios特点回顾
支持客户端发送Ajax请求
支持服务端Node.js发送请求
支持Promise相关用法
支持请求和响应的拦截器功能
自动转换JSON数据
axios 底层还是原生js实现, 内部通过Promise封装的
axios({
method: '请求方式', // get post
url: '请求地址',
data: { // 拼接到请求体的参数, post请求的参数
xxx: xxx,
},
params: { // 拼接到请求行的参数, get请求的参数
xxx: xxx
}
}).then(res => {
console.log(res.data) // 后台返回的结果
}).catch(err => {
console.log(err) // 后台报错返回
})
准备工作
接口文档
axios请求接口使用
根域名: http://123.57.109.30:3006
获取
-
请求方式: GET
-
请求地址: 根域名/api/getbooks
-
请求参数:
不传参获取所有默认书籍, 也可以选择传递下面任意1-多个参数, 获取指定的相关书籍信息
返回示例
{
"status": 200, // 状态码200都代表完全成功 - 无任何意义随便写, 只是方便前端写判断条件
"msg": "获取图书列表成功", // 后台返回的提示消息, 随便写, 只是方便前端直接打印提示消息
"data": [ // 后台返回的数据
{ "id": 1, "bookname": "西游记", "author": "吴承恩", "publisher": "北京图书出版社" },
{ "id": 2, "bookname": "红楼梦", "author": "曹雪芹", "publisher": "上海图书出版社" },
{ "id": 3, "bookname": "三国演义", "author": "罗贯中", "publisher": "北京图书出版社" }
]
}
添加
-
请求方式: POST
-
请求地址: 根域名/api/addbook
-
请求参数:
返回示例:
{
"status": 201, // 后台返回数据逻辑层的状态码, 201代表后台已经新增加了一个资源
"data": {
"author": "施大神"
"bookname": "水浒传2"
"id": 41
"publisher": "未来出版社"
}
"msg": "添加图书成功"
}
1.1-vue使用axios流程
-
1.下载axios : 在根目录执行npm命令:
npm i axios
-
脚手架基于webapck,而webpack又基于node. 因此vue项目所有的包都可以用npm来下载管理
-
-
2.导入axios : 需要使用ES6模块化语法
-
import axios from "axios"
-
-
3.使用axios : 与之前语法一致
<template>
<div>
<p>1. 获取所有图书信息</p>
<button @click="getAllFn">点击-查看控制台</button>
</div>
</template>
<script>
// 目标1: 获取所有图书信息
// 1. 下载axios : npm i axios
// 2. 引入axios : import axios from "axios"
// 3. 发起axios请求
import axios from "axios";
export default {
methods: {
getAllFn() {
axios({
url: "http://123.57.109.30:3006/api/getbooks",
method: "GET", // 默认就是GET方式请求, 可以省略不写
}).then((res) => {
console.log(res);
});
// axios()-原地得到Promise对象
},
}
};
</script>
1.2-查询图书
<template>
<div>
<p>1. 获取所有图书信息</p>
<input type="text" placeholder="请输入要查询 的书名" v-model="bName" />
<button @click="findFn">点击-查看控制台</button>
</div>
</template>
<script>
// 目标1: 获取所有图书信息
// 1. 下载axios
// 2. 引入axios
// 3. 发起axios请求
import axios from "axios";
export default {
data() {
return {
bName: '',
};
},
methods: {
//查询图书
findFn() {
axios({
url: "http://123.57.109.30:3006/api/getbooks",
method: "GET",
params: { // 都会axios最终拼接到url?后面
bookname: this.bName
}
}).then(res => {
console.log(res);
})
}
}
};
</script>
1.3-发布图书
<template>
<div>
<p>1. 获取所有图书信息</p>
<input type="text" placeholder="请输入要查询 的书名" v-model="bName" />
<button @click="findFn">点击-查看控制台</button>
<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>
</div>
</template>
<script>
// 目标1: 获取所有图书信息
// 1. 下载axios
// 2. 引入axios
// 3. 发起axios请求
import axios from 'axios'
export default {
data () {
return {
bName: '',
bookObj: {
// 参数名提前和后台的参数名对上-发送请求就不用再次对接了
bookname: '',
author: '',
publisher: ''
}
}
},
methods: {
//查询图书
findFn () {
axios({
url: 'http://123.57.109.30:3006/api/getbooks',
method: 'GET',
params: {
// 都会axios最终拼接到url?后面
bookname: this.bName
}
}).then(res => {
console.log(res)
})
},
//发布图书
sendFn () {
axios({
url: 'http://123.57.109.30:3006/api/addbook',
method: 'POST',
data: {
appkey: '7250d3eb-18e1-41bc-8bb2-11483665535a',
...this.bookObj
// 等同于下面
// bookname: this.bookObj.bookname,
// author: this.bookObj.author,
// publisher: this.bookObj.publisher
}
}).then(res => {
console.log(res)
})
}
}
}
</script>