watach函数：
与vue2.x的配置功能一致
监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
通过配置deep为true, 来指定深度监视
watchEffect函数：
不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据 默认初始时就会执行第一次, 从而可以收集需要监视的数据 监视数据发生变化时回调
watchEffect 是不支持 deep 参数的，也就是说它不会对数据进行深度监听。 watchEffect 中的回调函数只会监听使用到的响应式数据的变化， 如果这些响应式数据是对象或数组，只有它们的引用发生变化时才会触发回调函数执行。
<template>
<div style="font-size: 14px;">
<h2>测试watch监视 和 watchEffect</h2>
fistName: <input v-model="user.firstName"/><br>
lastName: <input v-model="user.lastName"/><br>
fullName3: <input v-model="fullName3"><br>
fullName4: <input v-model="fullName3"><br>
</div>
</template>
<script lang="ts">
// vue3.0 版本语法
import {
defineComponent,
reactive,
ref,
watch,
watchEffect
} from 'vue'
export default defineComponent({
setup () {
const user = reactive({
firstName: '张',
lastName: '三'
})
const fullName3 = ref('')
const fullName4 = ref('')
/* watchEffect: 监视所有回调中使用的数据*/
watchEffect(() => {
console.log('watchEffect')
fullName4.value = user.firstName + '-' + user.lastName
})
/*
使用watch的2个特性:
深度监视
初始化立即执行
*/
watch(user, () => {
fullName3.value = user.firstName + '-' + user.lastName
}, {
immediate: true, // 是否初始化立即执行一次, 默认是false
deep: true, // 是否是深度监视, 默认是false
})
/*
watch一个数据
默认在数据发生改变时执行回调
*/
watch(fullName3, (value) => {
console.log('watch')
const names = value.split('-')
user.firstName = names[0]
user.lastName = names[1]
})
/*
watch多个数据:
使用数组来指定
如果是ref对象, 直接指定
如果是reactive对象中的属性, 必须通过函数来指定
*/
watch([() => user.firstName, () => user.lastName, fullName3], (values) => {
console.log('监视多个数据', values)
})
return {
user,
fullName3,fullName4
}
}
})
</script>
