watch

与Vue2.x中watch配置功能一致

watch函数是提供了在某个时机做一些事情，同vue的生命周期钩子

和computed的区别是，watch看重的是过程变化，而computed看重的是结果且结果是只读的，不可修改，而且computed是提供了缓存可以提高性能，这也是和JS普通函数的区别。使用时推荐使用watch 和 computed

示例

<template><div class="home"><div>{{userInfo.name}}</div><div>{{userInfo.age}}</div><button @click="changeUserName">修改名称</button><button @click="changeUserAge">修改年龄</button></div></template><script lang="ts">import {defineComponent,watch, watchEffect,} from 'vue';export default defineComponent({name: 'Home',setup(props, context) {console.log('setup');const userInfo = reactive({name: '张三',age: 18,});function changeUserName() {userInfo.name = '李四';}function changeUserAge() {userInfo.age = 100;}// 初次进入，newValue有值，oldValue无值// 数据改变后 oldValue 不正常，oldValue 的值还是 newValue 的值// 在使用时，如确定该对象的所有属性都要监听则可直接传入对象，否则还是建议传入监听的具体属性值watch(userInfo, (newValue, oldValue) => {console.log('userInfo 变化了 newValue', newValue);console.log('userInfo 变化了 oldValue', oldValue);}, {immediate: true, deep: true });// 初次进入则渲染，oldValue 初次进入是 undefined// 数据改变则渲染，oldValue 有旧版本的值watch(() => userInfo.name, (newValue, oldValue) => {console.log('userInfo 的 name 变化了', newValue, oldValue);}, {immediate: true, deep: true });// watchEffect 所指定的回调中用到的数据只要发生变化，则直接重新执行回调。watchEffect(() => {const {name } = userInfo;console.log('watchEffect配置的回调执行了', name);});return {userInfo,changeUserName,changeUserAge,};},});</script>

如果觉得《vue3基础-组合式API之watch》对你有帮助，请点赞、收藏，并留下你的观点哦！