Vue3基础（3）——组件生命周期、watch、组件之间数据共享

黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程_哔哩哔哩_bilibili喜欢的小伙伴们别忘了投币，点赞，收藏呦，历经 5 年的反复打磨与锤炼，黑马程序员重磅推出全套最新的 Vue2 + Vue3 基础课程。共计 500 多集的免费视频，助您轻松掌握前端圈最火的 Vue 框架！https://www.bilibili.com/video/BV1zq4y1p7ga?p=399&spm_id_from=333.1007.top_right_bar_window_history.content.click0. vue 3.0中全局配置axios

 在实际项目开发中，几乎每个组件都会用到axios发起数据请求。此时会遇到两个问题：

• 每个组件中都需要导入axios（代码臃肿）
• 每次发送请求都需要填写完整的请求路径（不利于后期的维护）

npm i axios

在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios 

// main.js
import axios from 'axios'

const app=createApp(App)

axios.defaults.baseURL='http://www.escook.cn'
app.config.globalProperties.$http=axios

<!-- GetInfo.vue -->
<template>
  <div>
    <h3>Get Info 组件</h3>
    <button type="button" class="btn btn-primary" @click="getInfo">发起 GET 请求</button>
  </div>
</template>

<script>
export default {
  name: 'GetInfo',
  methods: {
    // this.$http.get()返回值是Promise对象。
    // await 操作符用于等待一个 Promise 对象。它只能在异步函数 async function 中使用。
    async getInfo() { // 发起get请求
      // 从对象中解构赋值出data属性并重命名为res
      const { data: res } = await this.$http.get('/api/get', {
        params: {
          name: 'ls',
          age: 33,
        },
      })
      console.log(res)
    },
  },
}
</script>

<!-- PostInfo.vue -->
<template>
  <div>
    <h3>Post Info 组件</h3>
    <button type="button" class="btn btn-success" @click="postInfo">发起 POST 请求</button>
  </div>
</template>

<script>
export default {
  name: 'PostInfo',
  methods: {
    async postInfo() { // 发起post请求
      const { data: res } = await this.$http.post('/api/post', { name: 'zs', age: 20 })
      console.log(res)
    },
  },
}
</script>

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ 理解 promise 和 async/await 的使用 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓​​​​​​​ ↓ ↓ ↓​​​​​​​ Promise和Async/await的理解和使用 - 蒋先森 - 博客园「长文干货」Promise和Async/await的理解和使用 注意：文中的代码比较多，手机端浏览起来可能比较费劲，建议在PC端浏览，如果代码排版乱了请点击文末了解更多连接查看排版更友好的原文。 一、https://www.cnblogs.com/jiangweichen88/p/13528218.html

---

1. watch侦听器

watch 侦听器允许开发者监视数据的变化吗，从而针对数据的变化做特定的操作，

（1）定义watch侦听器：开发者需要在watch节点下，定义自己的侦听器。

（2）使用watch检测用户名是否可用：监听username值的变化，并用axios发起Ajax请求，检测当前输入的用户名是否可用。

（3）immediate选项：默认情况下，组件在初次加载完毕后不会调用watch侦听器，如果想让watch侦听器立即被调用，需要使用immediate选项。

（4）deep选项：当watch侦听的是一个对象，若对象中的属性值发生了变化，则无法被监听到，此时需要使用deep选项，设置deep:true之后，对象中的所有属性均可被监听。

（5）监听对象单个属性的变化：只想监听对象单个属性的变化，定义watch监听器时采用如 'info.username': { } 的方式。

npm i axios

<template>
  <div>
    <h3>watch 侦听器的用法</h3>
    <!-- 双向数据绑定 -->
    <input type="text" class="form-control" v-model.trim="info.username" />
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'MyWatch',
  data() {
    return {
      username: 'admin',
      info: {
        username: 'zs',
        age: 20,
      },
    }
  },
  watch: {
    // 1、监听username值的变化：第一个形参：新值，第二个形参：旧值
    // async username(newVal, oldVal) {
    //   console.log(newVal