vue3学习之旅（二）

1、watch

import {reactive, watch} from 'vue';
const message = reactive({
    name1: '校长';
    name2: '小红'
});
// 监听对象的变化
watch(message, (newVal, oldVal) => {
    console.log('newVal', newVal);
    console.log('oldVal', oldVal);
}, {
    immediate: true,
    deep: true
})
// 如果只想监听对象中某一个值的变化
watch(() => message.name1, (newVal, oldVal) => {
    console.log('newVal', newVal);
    console.log('oldVal', oldVal);
})
// 监听多个值的变化
let age = ref(18);
watch([message, age], (newVal, oldVal) => {
    console.log('newVal', newVal); // []
    console.log('oldVal', oldVal); // []
});

2、watchEffect

watchEffect 是非惰性的，初始化的时候就会自动执行一次

import {watchEffect, ref} from 'vue';
const name = ref('张三');
const age = ref(18);
watchEffect((onInvalidate) => {
    console.log('name===>', name.value); // name发生改变的时候会执行
    onInvalidate(() => {
        console.log('before'); // 会在watchEffect函数最开始的时候执行，先执行该回调
    })
})

也可以停止监听

<input v-model="name" />
<button @click="onStop">停止监听</button>

import {watchEffect, ref} from 'vue';
const name = ref("张三");
const stop = watchEffect((onInvalidate) => {
    console.log("name===>", name.value);
    onInvalidate(() => {
        console.log('before');
    })
})
// 点击停止监听按钮，就会停止对watchEffect的监听,但watchEffect的onInvalidate回调还会执行一次
const onStop = () => { 
    stop();
}

watchEffect的第二个参数

<input id="ipt" />
watchEffect(() => {
    const ipt: HTMLInputElement = document.querySelector('#ipt') as HTMLInputElement;
    console.log(ipt, 'ellllll'); // null  此时是获取不到dom的
})

// 当添加上第二个参数的配置时可以获取到dom
watchEffect(() => {
    const ipt: HTMLInputElement = document.querySelector('#ipt') as HTMLInputElement;
    console.log(ipt, 'ellll'); // dom 添加上flush:post的配置时可以获取到dom
}, {
    flush: 'post',
    onTrigger(e) { // 提供的onTrigger函数可以帮助我们进行调试
    
    }
})