生命周期
生命周期概念： vue 实例从创建到销毁的过程就是生命周期。
钩子（内置）函数
作用： 特定时间点，咨询待定的操作
场景： 组件创建完毕后，可以在created生命周期函数中发起ajax请求，从而初始化data
分类
4大阶段8个方法
Vue官网（cn.vuejs.org/v2/guide/in…
生命周期图示
1、初始化阶段
含义讲解:
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
1 <script>
2 export default {
3 data(){
4 return {
5 msg: "hello, Vue"
6 }
7 },
8 // 一. 初始化
9 // new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"
10 beforeCreate(){
11 console.log("beforeCreate -- 执行");
12 console.log(this.msg); // undefined
13 },
14 // data和methods初始化以后
15 // 场景: 网络请求, 注册全局事件
16 created(){
17 console.log("created -- 执行");
18 console.log(this.msg); // hello, Vue
19
20 this.timer = setInterval(() => {
21 console.log("哈哈哈");
22 }, 1000)
23 }
24 }
25 </script>
复制代码App.vue
1 <template>
2 <div>
3 <h1>1. 生命周期</h1>
4 <Life></Life>
5 </div>
6 </template>
7
8 <script>
9 import Life from './components/Life'
10 export default {
11 components: {
12 Life
13 }
14 }
15 </script>
复制代码2、挂载阶段
含义讲解:
1.template选项检查
有 - 编译template返回render渲染函数
无 – 编译el选项对应标签作为template(要渲染的模板)
2.虚拟DOM挂载成真实DOM之前
3.beforeMount – 生命周期钩子函数被执行
4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上
5.真实DOM挂载完毕
6.mounted – 生命周期钩子函数被执行 components/Life.vue
1 <template>
2 <div>
3 <p>学习生命周期 - 看控制台打印</p>
4 <p id="myP">{{ msg }}</p>
5 </div>
6 </template>
7
8 <script>
9 export default {
10 // ...省略其他代码
11
12 // 二. 挂载
13 // 真实DOM挂载之前
14 // 场景: 预处理data, 不会触发updated钩子函数
15 beforeMount(){
16 console.log("beforeMount -- 执行");
17 console.log(document.getElementById("myP")); // null
18
19 this.msg = "重新值"
20 },
21 // 真实DOM挂载以后
22 // 场景: 挂载后真实DOM
23 mounted(){
24 console.log("mounted -- 执行");
25 console.log(document.getElementById("myP")); // p
26 }
27 }
复制代码3、更新阶段
含义讲解:
1.当data里数据改变, 更新DOM之前
2.beforeUpdate – 生命周期钩子函数被执行
3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM
4.updated – 生命周期钩子函数被执行
5.当有data数据改变 – 重复这个循环
components/Life.vue
1 <template>
2 <div>
3 <p>学习生命周期 - 看控制台打印</p>
4 <p id="myP">{{ msg }}</p>
5 <ul id="myUL">
6 <li v-for="(val, index) in arr" :key="index">
7 {{ val }}
8 </li>
9 </ul>
10 <button @click="arr.push(1000)">点击末尾加值</button>
11 </div>
12 </template>
13
14 <script>
15 export default {
16 data(){
17 return {
18 msg: "hello, Vue",
19 arr: [5, 8, 2, 1]
20 }
21 },
22 // ...省略其他代码
23
24 // 三. 更新
25 // 前提: data数据改变才执行
26 // 更新之前
27 beforeUpdate(){
28 console.log("beforeUpdate -- 执行");
29 console.log(document.querySelectorAll("#myUL>li")[4]); // undefined
30 },
31 // 更新之后
32 // 场景: 获取更新后的真实DOM
33 updated(){
34 console.log("updated -- 执行");
35 console.log(document.querySelectorAll("#myUL>li")[4]); // li
36 }
37 }
38 </script>
复制代码4、销毁阶段
含义讲解:
1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)
2.beforeDestroy – 生命周期钩子函数被执行
3.拆卸数据监视器、子组件和事件侦听器
4.实例销毁后, 最后触发一个钩子函数
5.destroyed – 生命周期钩子函数被执行
components/Life.vue
1 <script>
2 export default {
3 // ...省略其他代码
4
5 // 四. 销毁
6 // 前提: v-if="false" 销毁Vue实例
7 // 场景: 移除全局事件, 移除当前组件, 计时器, 定时器, eventBus移除事件$off方法
8 beforeDestroy(){
9 // console.log('beforeDestroy -- 执行');
10 clearInterval(this.timer)
11 },
12 destroyed(){
13 // console.log("destroyed -- 执行");
14 }
15 }
16 </script>
复制代码App.vue
- 点击按钮让Life组件从DOM上移除 -> 导致Life组件进入销毁阶段
1 <Life v-if="show"></Life>
2 <button @click="show = false">销毁组件</button>
3
4 <script>
5 data(){
6 return {
7 show: true
8 }
9 },
10 </script>
复制代码 1 <Life v-if="show"></Life>
2 <button @click="show = false">销毁组件</button>
3
4 <script>
5 data(){
6 return {
7 show: true
8 }
9 },
10 </script>
复制代码axios
axios基本使用
特点：
- 支持客户端发送Ajax请求
- 支持服务端Node.js发送请求
- 支持Promise相关用法
- 支持请求和响应的拦截器功能
- 自动转换JSON数据
- axios 底层还是原生js实现, 内部通过Promise封装的
基本使用
1 axios({
2 method: '请求方式', // get post
3 url: '请求地址',
4 data: { // 拼接到请求体的参数, post请求的参数
5 xxx: xxx,
6 },
7 params: { // 拼接到请求行的参数, get请求的参数
8 xxx: xxx
9 }
10 }).then(res => {
11 console.log(res.data) // 后台返回的结果
12 }).catch(err => {
13 console.log(err) // 后台报错返回
14 })
复制代码axios基本使用-获取数据
1 <template>
2 <div>
3 <p>1. 获取所有图书信息</p>
4 <button @click="getAllFn">点击-查看控制台</button>
5 </div>
6 </template>
7
8 <script>
9 // 目标1: 获取所有图书信息
10 // 1. 下载axios
11 // 2. 引入axios
12 // 3. 发起axios请求
13 import axios from "axios";
14 export default {
15 methods: {
16 getAllFn() {
17 axios({
18 url: "http://123.57.109.30:3006/api/getbooks",
19 method: "GET", // 默认就是GET方式请求, 可以省略不写
20 }).then((res) => {
21 console.log(res);
22 });
23 // axios()-原地得到Promise对象
24 },
25 }
26 };
复制代码axios基本使用-传参
GET请求方式： 用params传参，拼接到url？后面
POST请求方式： 用data传参，把参数自动装入请求体中；一般在请求体重传递数据给后台
注意: 1、 axios函数调用原地结果是一个Promise**对象
2、默认发送给后台请求体的数据格式，json字符串格式
全局配置
语法：axios.defaults.baseURL="项目根路径"