vue3 的监听函数，watch函数和watchEffect函数。

watch函数:

与Vue2中的watch配置功能一致,

• 参数1:要监听的数据

• 参数2:回调函数

• 参数3:配置

作用

监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调

默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次

通过配置deep为true, 来指定深度监视

import { watch, ref } from 'vue'; // 引入
const user = reactive({
  firstName: '孙',
  lastName: '志豪',
});
const fullName3 = ref('');

watch( // vue3 监听函数的写法 
  () => user, // 监听的数据  
  ({ firstName, lastName }) => { // 数据变动执行的函数
    fullName3.value = firstName + '_' + lastName;
  },
  { immediate: true, deep: true } // 深度监听   和    第一次加载页面执行一次
);

return {
  user,
  fullName3,
};

watch监听多个数据,使用数组

watch监听非响应式数据的时候需要使用回调函数的形式

watch([()=>user.firstName,()=>user.lastName,fullName3],()=>{console.log('我执行了')})
//第一个参数写成数组的形式

watchEffect函数:

作用

监视数据发生变化时执行回调，不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据，默认初始时就会执行第一次, 从而可以收集需要监视的数据。

import { watchEffect, ref } from 'vue';
const user = reactive({
  firstName: '孙',
  lastName: '志豪',
});
const fullName4 = ref('');
watchEffect(() => {
  fullName4.value = user.firstName + '_' + user.lastName;
});
return {
  user,
  fullName4,
};
// watchEffect可以实现计算属性set方法
watchEffect(() => {
    const names = fullName3.value.split('_');
    user.firstName = names[0];
    user.lastName = names[1];
});