一、watch 侦听器
1. watch 基本用法
监视数据的变化，从而针对数据的变化做特定的操作。
export default{
data(){
return { username: ''}
},
//监听username的值的变化
//形参列表中，第一个值是“变化后的新值”，第二个值是“变化之前的旧值”
watch: {
username(newVal,oldVal){
console.log(newVal,oldVal)
},
},
}2. 使用 watch 检测用户名是否可用
监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：
import axios from 'axios'
export default {
data(){
return { username: ''}
},
watch:{
async username(newVal, oldVal){
const { data: res} = await axios.get("https://www........")
console.log(res)
},
},
}3. immediate 选项
默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用?immediate?选项。
watch: {
//1. 监听username值的变化
username:{
//2. handler属性是固定写法，当username变化时，调用handler
async handler(newVal, oldVal){
const { data: res} = await axios.get("https://www........")
console.log(res)
},
//3. 表示组件加载完毕后立即调用一次当前的watch监听器
immediate: true
}
}4.?deep 选项
当?watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。
<input type="text" v-model.trim="info.username">
data(){
return {
info: {username: 'admin'}
}
},
watch:{
info: {
async handler(newVal, oldVal){
const { data: res} = await axios.get("https://www........")
console.log(res)
}
//需要用deep，否则username值变化无法被监听到
deep: true
}
}5.?监听对象单个属性的变化
data(){
return {
info: {username: 'admin',password:''}
}
},
watch:{
'info.username': { //只想监听info.username属性值的变化
async handler(newVal, oldVal){
const { data: res} = await axios.get("https://www........")
console.log(res)
}
}
}6. 计算属性 vs 侦听器
计算属性：侧重于监听多个值的变化，最终计算并返回一个新值
侦听器：侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值
二、组件的生命周期
1. 组件运行的过程
?
组件的生命周期：创建?->?运行（渲染） ->?销毁
2.?监听组件的不同时刻
vue 框架内置了不同时刻的生命周期函数，生命周期函数会伴随着组件的运行而调用。
① 当组件在内存中被创建完毕之后，会自动调用?created?函数
② 当组件被成功的渲染到页面上之后，会自动调用?mounted?函数
③ 当组件被销毁完毕之后，会自动调用?unmounted?函数
3. 如何监听组件的更新
当组件的?data 数据更新之后，vue 会自动重新渲染组件的 DOM 结构，从而保证?View 视图展示的数据和Model 数据源保持一致。
当组件被重新渲染完毕之后，会自动调用?updated?生命周期函数。
4. 生命周期函数
主要的：?
全部的：
为什么不在?beforeCreate?中发 ajax 请求初始数据？
ajax请求的数据要放在data中渲染的，但?beforeCreate无法访问data。
为什么不能在beforeMount中操作dom?
组件还没渲染到页面中。
三、组件之间的数据共享
1. 组件之间的关系
- 父子关系
- 兄弟关系
- 后代关系
2. 父子组件之间的数据共享
2.1 父组件向子组件共享数据
父组件通过?v-bind 属性绑定向子组件共享数据。同时，子组件需要使用?props?接收数据。
父组件：
//父组件向子组件传值msg和user
<my-test-1 :msg="message" :user="user info"></my-test-1>
data(){
return {
message:"hello",
userinfo:{name:'xiaoheng',age:20},
}
}子组件：
<template>
<p>{{msg}}</p>
<p>{{user}}</p>
</template>
<script>
export default{
//子组件通过props接受
props:['msg','user'],
}
</script>2.2 子组件向父组件共享数据
子组件通过自定义事件向父组件共享数据。
子组件
export default{
emits:['nchange'], //声明自定义事件
data(){return {n:0}},
methods:{
addn(){
this.n++
//数据变化时触发自定义事件
this.$emit('nchange',this.n)
},
},
}父组件
//监听子组件的自定义事件nchange
<my-test-1 @nchange="getn"></my-test-1>
export default{
data(){ return { nfromson:0 } },
methods:{
//通过形参，接受子组件传递过来的数据
getn(n){
this.nfromson = n
},
},
}
2.3 父子组件之间数据的双向同步
v-model 指令
?3. 兄弟组件之间的数据共享
EventBus
安装mitt依赖包
npm install mitt@2.1.0创建公共的 EventBus 模块: eventBus.js
//导入mitt包
import mitt from 'mitt'
//创建eventbus的实例对象
const bus = mitt()
//将eventbus的实例对象共享出去
export default bus在数据接收方自定义事件
import bus from './eventBus.js'
export default{
data(){ return { count: 0}},
created(){
//调用bus.on()方法注册一个自定义事件，通过事件处理函数的形参接受数据
bus.on('countChange',(count)=>{
this.count = count
})
}
}在数据接发送方触发事件
import bus from './eventBus.js'
export default{
data(){ return { count: 0}},
methods:{
addCount(){
this.count++
//调用bus.emit()方法触发自定义事件，并发送数据
bus.emit('countChange',this.count)
}
}
}4. 后代关系组件之间的数据共享
用?provide?和?inject?实现后代关系组件之间的数据共享。
?父节点通过?provide?共享数据
export default{
data(){
return{
color:'red' //定义父组件要向子组件共享的数据
}
}
provide(){ //provide函数返回要向子组件共享的数据
return{
color: this.color,
}
}
}子孙节点通过?inject?接收数据
<template>
<h1>{{color}}</h1>
</template>
<script>
//使用inject接受父组件共享的数据
export default{
inject:['color']
}
<script>父节点对外共享响应式的数据
结合?computed 函数向下共享响应式的数据
//从vue中按需导入computed函数
import { computed } from 'vue'
export default{
data(){
return { color: 'red'}
},
provider(){
//使用computed函数，可以把要共享的数据包装为响应式数据
return{
color: computed(()=> this.color),
}
}
}子孙节点使用响应式的数据
如果父级节点共享的是响应式的数据，则子孙节点必须以?.value?的形式进行使用
<template>
<h3>{{color.value}}</h3>
</template>
<script>
export default{
inject: ['color']
}
</script>Vuex: 管理需要被共享的数据
四、vue 3.x 中全局配置 axios
为什么要全局配置：
- 每个组件中都需要导入 axios（代码臃肿）
- 每次发请求都需要填写完整的请求路径（不利于后期的维护）
如何配置：
在?main.js?入口文件中，通过?app.config.globalProperties?全局挂载 axios
main.js
import axios from 'axios'
const app = createApp(App)
axios.defaults.baseURL = 'https://www.escook.cn'
app.config.globalProperties.$http = axios
app.mount('#app')GetInfo.vue
<template>
<div>
<button type="button" class="btn btn-primary" @click="getInfo">发起 GET 请求</button>
</div>
</template>
<script>
export default {
name: 'GetInfo',
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>
<button type="button" class="btn btn-success" @click="postInfo">发起 POST 请求</button>
</div>
</template>
<script>
export default {
name: 'PostInfo',
methods: {
async postInfo() {
const { data: res } = await this.$http.post('/api/post', { name: 'zs', age: 20 })
console.log(res)
},
},
}
</script>?