5 组件高级（上）

摘要

在本文中，我们会详细讨论watch侦听器的基本使用，并且了解vue中常用的生命周期函数、实现组件之间的数据共享，最后学习如何在vue3.x项目中全局配置axios。

声明：为了文章的清爽性，在文章内部的代码演示中只会附上部分演示代码，main.js文件的代码通常不贴出，如果感兴趣可以前往代码仓库获取

作者：来自ArimaMisaki创作

文章目录

5 组件高级（上）
- 5.1 watch侦听器
- - 5.1.1 watch侦听器概述
  - 5.1.2 watch的使用场景
  - 5.1.3 侦听器选项
  - 5.1.4 监听对象单个属性的变化
  - 5.1.5 计算属性和侦听器
- 5.2 生命周期
- - 5.2.1 组件运行的过程
  - 5.2.2 如何监听组件的不同时刻
  - 5.2.3 如何监听组件的更新
  - 5.2.4 组件生命周期函数
- 5.3 数据共享
- - 5.3.1 组件之间的关系
  - 5.3.2 父子组件
  - 5.3.3 兄弟组件
  - 5.3.4 Prop逐级透传问题
  - 5.3.5 后代组件
  - 5.3.6 基于Provide向下共享响应式的数据
  - 5.3.7 vuex
- 5.4 全局配置axios

5.1 watch侦听器

5.1.1 watch侦听器概述

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

本质：监听器的本质也是一个函数，它允许接收两个参数，即新数据和老数据。

使用：在选项式API中，我们可以使用watch选项来定义所需的侦听器。

5.1.2 watch的使用场景

场景：检测用户名是否可用

说明：监听username值的变化，并使用axios发起Ajax请求，检测当前输入的用户名是否可用。要完成这个场景，需先安装axios包。

<template><div><h3>watch 侦听器的用法</h3><input type="text" class="form-control" v-model.trim="username"></div>
</template><script>
import axios from 'axios'export default {name: 'MyWatch',data() {return {username: 'admin',}},watch: {async username(newVal, oldVal) {console.log(newVal, oldVal);const { data: res } = axios.get('https://www.escook.cn/api/finduser' + newVal)console.log(res);}}
}
</script>

<template><div><h1>App根组件</h1><hr><my-watch></my-watch></div>
</template><script>
import MyWatch from "./MyWatch.vue"
export default {name: 'MyWatch',components: {MyWatch},
}
</script>

5.1.3 侦听器选项

immediate选项：watch是懒执行的。默认情况下，组件在初次加载完毕后不会调用watch侦听器，仅当数据源发生改变时，侦听器才会触发。如果想让watch侦听器立即被调用，需要使用immediate选项。需要额外注意的是，当我们第一次使用侦听器时，旧值为undefined。

deep选项：如果我们侦听的源是对象或数组，在不使用选项的情况下我们无法使用侦听器来侦听它们的变化。使用deep选项可以强制深度遍历源，以便源在进行变更的时候触发回调。

info: {async handler(newVal) {const { data: res } = await axios.get('https://www.escook.cn/api/finduser' + newVal.username)console.log(res);},deep:true}

5.1.4 监听对象单个属性的变化

说明：使用deep选项会遍历数组或对象中的所有属性，如果想要监听单个属性，我们可以采用.的形式指定获取数组或对象的单个属性作为监听源。不过需要注意的是，由于使用了.的缘故，作为键的一方需要加上单引号或双引号。

5.1.5 计算属性和侦听器

说明：有很多人会搞混计算属性和侦听器。实际上，计算属性侧重于监听多个值得变化，并最终计算返回一个新值，而侦听器侧重于监听单个数据源的变化，最终执行特定的业务处理，不需要有任何返回值。

5.2 生命周期

5.2.1 组件运行的过程

组件的生命周期：组件的生命周期指的是组件从创建到湮灭的整个过程，该术语强调的是这个时间段。

5.2.2 如何监听组件的不同时刻

说明：Vue框架为组件内置了不同时刻的生命周期函数，生命周期函数会伴随着组件的运行而自动调用。另外，生命周期函数常被称为生命周期钩子。

当组件在内存中被创建完毕之后，会自动调用created函数
当组件被成功的渲染到页面上之后，会自动调用mounted函数
当组件被销毁完毕之后，会自动调用unmounted函数。

<template><div><h3>LifeCycle 组件</h3></div>
</template><script>
export default {name:'LifeCycle',// 组件在内存中被创建完毕了created(){console.log(`created:组件在内存中被创建完毕了`);},// 组件第一次被渲染到页面上mounted(){console.log(`mounted:组件第一次被渲染到了页面上`);},// 组件被销毁完毕了unmounted(){console.log(`unmounted:组件被销毁完毕了`);}
}
</script>

<template><div><h1>App根组件</h1><hr><button @click="flag = !flag">toggle</button><life-cycle v-if="flag"></life-cycle></div>
</template><script>
import LifeCycle from "./life-cycle.vue"
export default {name: 'MyApp',data(){return{flag:true}},components: {LifeCycle}
}
</script>