Vue 3.0 组件高级（上）

一、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 {