一、目标

能够掌握watch侦听器的基本使用
能够知道vue中常用的生命周期函数
能够知道如何实现组件之间的数据共享
能够知道如何在vue3.x的项目中全局配置axios

二、目录

watch侦听器

1.什么是watch侦听器

watch侦听器允许开发之监视数据的变化，从而针对数据的变化做特定的操作。例如：监视用户名的变化并发起请求，判断用户名是否可用。

2.watch侦听器的基本语法

开发者需要在 watch节点下，定义自己的侦听器。实例代码如下：

<template>
  <div>
  <input type="text" class="form-control" v-model.trim="username">
  </div>
</template>

<script>

export default {
    name:'MyCounter',
    data(){
        return{
            username:''
        }
    },
    watch:{
        username(newVal,oldVal){
            console.log(newVal,oldVal)
        }
    }
}
</script>

3.使用watch检测用户名是否可用

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

4.immediate选项

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

5.deep选项

当watch侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选项，代码示例如下：

6.监听对象单个属性的变化

如果只想监听对象中单个属性的变化，则可以按照如下的方式定义watch监听器：

7.计算属性vs侦听器

计算属性和侦听器侧重的应用场景不同：

计算属性侧重于监听多个值的变化，最终计算并返回一个新值。

侦听器侧重于侦听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值。

组件的生命周期

1.组件运行的过程

组件的生命周期指的是：组件从创建->运行（渲染）->销毁的整个过程，强调的是一个时间段。

2.如何监听组件的不同时刻

vue框架为组件内置了不同时刻的生命周期函数，生命周期函数会伴随着组件的运行而自动调用。例如：

①当组件在内存中被创建完毕之后，会自动调用created函数

②当组件被成功的渲染到页面上之后，会自动调用mounted函数

③当组件被销毁完毕之后，会自动调用unmounted函数

3.如何监听组件的更新

当组件的data数据更新之后，vue会自动重新渲染组件的DOM结构，从而保证View视图展示的数据和Model数据源保持一致。

当组件被重新渲染完毕之后，会自动调用uodated生命周期函数。

4.组件中的主要的生命周期函数

注意：在实际开发中，created是最常用的生命周期函数！

5.组件中全部的生命周期函数

疑问：为什么不在beforeCreate中发ajax请求初始数据？

因为，在拿到ajax返回的数据之后，要存到data里面去。存到data里面去，才能在组件渲染的时候访问到data里面的数据。注意，在beforeCreate生命周期函数中，我们无法访问到data里面数据的，无法挂载到data里面供我们去使用的。

6.完整的生命周期图示

可以参考Vue官方文档给出的“生命周期图示”，进一步理解组件生命周期执行的过程：

生命周期钩子 | Vue.js (vuejs.org)

组件之间的数据共享

1.组件之间的关系

在项目开发中，组件之间的关系分为如下3种：

①父子关系

②兄弟关系

③后代关系

2.父子组件之间的数据共享

父子组件之间的数据共享又分为：

①父->子共享数据

②子->父共享数据

③父<->子双向数据同步

2.1父组件向子组件共享数据

父组件通过v-bind属性绑定向子组件共享数据。同时，子组件需要使用props接收数据。示例代码如下：

2.2 子组件向父组件共享数据

子组件通过自定义事件的方式向父组件共享数据。示例代码如下：

2.3父子组件之间数据的双向同步

父组件在使用子组件期间，可以使用v-model指令维护组件内外数据的双向同步：

<template>
  <div>
    <h1>App根组件{{ count }}</h1>
    <!-- <Son :data="count" @numchange="getNum"></Son> -->
    <Son v-model:data="count"></Son>
  </div>
</template>

<script>
import Son from "../03Post/Son.vue";
export default {
  name: "MyApp",
  data() {
    return {
      count: 0,
    };
  },
  methods: {},
  components: {
    Son,
  },
};
</script>

<style>
</style>

<template>
  <div>
    <h1>这是子组件</h1>
    <h1>这是父->子{{ data }}</h1>
    <button type="button" @click="add">+1</button>
  </div>
</template>

<script>
export default {
  props: ["data"],
  emits: ["update:data"],
  methods: {
    add() {
      //   this.$emits("numchange", this.num + 1);
      this.$emit("update:data", this.data + 1);
    },
  },
};
</script>

<style>
</style>

3.兄弟组件之间的数据共享

兄弟组件之间实现数据共享的方案是EventBus。可以借助于第三方的包mitt来创建eventBus对象，从而实现兄弟组件之间的数据共享。示意图如下：

3.1安装mitt依赖包

在项目中运行如下的命令，安装mitt依赖包：

3.2创建公共的EventBus模块

在项目中创建公共的eventBus模块如下：

3.3在数据接收方自定义事件

在数据接收方，调用 bus.on('事件名称',事件处理函数）方法注册一个自定义事件。示例代码如下：

3.4在数据发送方触发事件

在数据发送方，调用 bus.emit('事件名称'，要发送的数据）方法触发自定义事件。示例代码：

4.后代关系组件之间的数据共享

后代关系组件之间共享数据，指的是父节点的组件向其子孙组件共享数据。此时组件之间的嵌套关系比较复杂，可以使用 provide 和 inject 实现后代关系组件之间的数据共享。

4.1父节点通过provide共享数据

父节点的组件可以通过provide方法，对其子孙组件共享数据：

4.2子孙节点通过inject接收数据

子孙节点可以使用inject数组，接收父级节点向下共享的数据。示例代码如下：

4.3父节点对外共享响应式的数据

父节点使用provide向下共享数据时，可以结合computed函数向下共享响应式的数据。示例代码如下：

4.4子孙节点使用响应式数据

如果父级节点共享的是响应式的数据，则子孙节点必须以.value的形式进行使用。示例代码如下：

5.vuex

vuex是终极的组件之间的数据共享方案。在企业级的vue项目开发中，vuex可以让组件之间的数据共享变得高效、清晰、且易于维护。（父组件和子组件，父组件和孙子组件之间存在复杂的数据传递关系，vuex应运而生）

6.总结

父子关系
- 父->子属相绑定
- 子->父事件绑定
- 父<->子组件上的v-model
兄弟关系
- EventBus
后代关系
- provide&inject
全局数据共享
- vuex

Vue 3.x中全局配置axios

1.为什么要全局配置axios

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

①每个组件中都需要导入axios（代码臃肿）

②每次发请求都需要填写完整的请求路径（不利于后期的维护）

2.如何全局配置axios

在main.js入口文件中，通过app.config.globalProperties全局挂栽axios，示例代码如下：

在mian.js中全局封装：

//1.按需导入createApp函数
import { createApp } from 'vue'
//2.导入待渲染的app.vue
import App from './components/v-model/App.vue'

import axios from 'axios'
//3.调用createApp函数，创建SPA应用的实例
const app = createApp(App);
axios.defaults.baseURL = 'https://applet-base-api-t.itheima.net'
app.config.globalProperties.$http = axios
    //4.调用mount()把App组件的模板结构，渲染到指定的el区域中
app.mount('#app')

GetInfo.vue

<template>
  <div>第一个</div>
  <button type="button" @click="getInfo">get</button>
</template>

<script>
export default {
  name: "GetInfo",
  data() {
    return {};
  },
  methods: {
    async getInfo() {
      const { data: res } = await this.$http.get("/api/get", {
        params: {
          name: "ls",
          age: 33,
        },
      });
      console.log(res);
    },
  },
};
</script>

PostInfo.vue

<template>
  <div>第二个</div>
  <button type="button" @click="postInfo">post</button>
</template>

<script>
export default {
  name: "PostInfo",
  data() {
    return {};
  },
  methods: {
    async postInfo() {
      const { data: res } = await this.$http.post("/api/post", {
        name: "zs",
        age: 16,
      });
      console.log(res);
    },
  },
};
</script>