vue的生命周期，一看通俗易懂

知识点自测

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

学习目标

• 能够说出vue组件生命周期
• 能够掌握axios的使用
• 能够了解$refs,$nextTick使用
• 能够完成购物车案例开发

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

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>
export default {
  data () {
    return {
      bookName: "",
      obj: {
        bookname: "",
        author: "",
        publisher: ""
      }
    }
  },
  methods: {
    // 获取所有图书
    allFn () {

    },
    // 查询某个图书信息
    selFn () {

    },
    // 新增图书
    addFn () {

    }
  },
}
</script>

正确答案

<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>

全局默认配置

• 入口main.js导入axios进行配置

+ import axios from "axios";
+ axios.defaults.baseURL = "http://123.57.109.30:3006"

• 组件中使用

import axios from "axios";

// 所有的axios请求都可以不带域名前缀了, 默认都拼接基础url
axios({
    method: "get",
-    url: "http://123.57.109.30:3006/api/getbooks",
+    url: "/api/getbooks",
}).then(function (res) {
    console.log(res);
});

$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>

获取组件对象

components/Demo.vue

<template>
  <div>
    <p :style="{ color: ind == 0 ? 'red' : '' }">首页</p>
    <p :style="{ color: ind == 1 ? 'red' : '' }">分类</p>
    <p :style="{ color: ind == 2 ? 'red' : '' }">爱好</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ind: 0,
    };
  },
  methods: {
    changeIndex(index) {
      this.ind = index;
    },
  },
};
</script>

<style>
</style>

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

<h1>2. 调用demo组件方法</h1>
<button @click="fn2">点击demo组件里最后一个高亮</button>
<Demo ref="de"></Demo>

<script>
import Demo from "./components/Demo";
export default {
  components: {
    Demo,
  },
  methods: {
    // ...省略
    fn2() {
      this.$refs.de.changeIndex(2);
    },
  },
};
</script>

小结

ref可以用来获取dom或组件实例对象

nextTick使用

目标

掌握nextTick的使用

背景

数据变化而导致的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
      }
    },
  };
</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使用场景

目标: 点击搜索按钮, 显示聚焦的输入框, 按钮消失=》默认输入框不显示

Search.vue

<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>

App.vue - 引入使用即可

扩展-$nextTick返回Promise对象

\

所以上面还可以改成如下写法

methods: {
    async searchFn(){
        this.isShow = true
        await this.$nextTick()
        this.$refs.inp.focus()
    }
}

案例 - 图书相关

获取

• 请求方式:  GET
• 请求地址: 根域名/api/getbooks
• 请求参数:

1. 不传参获取所有默认书籍
2. 也可以选择传递下面任意1-多个参数, 获取指定的相关书籍信息

参数名称	参数类型	是否必选	参数说明
id	Number	否	图书Id
bookname	String	否	图书名称
author	String	否	作者
publisher	String	否	出版社
appkey	String	否	个人ID

• 返回示例:

{
  "status": 200, 
  // 状态码200都代表完全成功 - 无任何意义随便写, 只是方便前端写判断条件
  "msg": "获取图书列表成功", 
  // 后台返回的提示消息, 随便写, 只是方便前端直接打印提示消息
  "data": [ // 后台返回的数据
    { "id": 1, "bookname": "西游记", "author": "吴承恩", "publisher": "北京图书出版社" },
    { "id": 2, "bookname": "红楼梦", "author": "曹雪芹", "publisher": "上海图书出版社" },
    { "id": 3, "bookname": "三国演义", "author": "罗贯中", "publisher": "北京图书出版社" }
  ]
}

添加

• 请求方式: POST
• 请求地址: 根域名/api/addbook
• 请求参数:

参数名称	参数类型	是否必选	参数说明
bookname	String	是	图书名称
author	String	是	作者
publisher	String	是	出版社
appkey	String	是	个人ID - 用'7250d3eb-18e1-41bc-8bb2-11483665535a'

• 返回示例:

{
    "status": 201, // 后台返回数据逻辑层的状态码, 201代表后台已经新增加了一个资源
    "data": {
        "author": "施大神"
        "bookname": "水浒传2"
        "id": 41
        "publisher": "未来出版社"
    }
    "msg": "添加图书成功"
}