网站建设工作半年通报,帮传销做网站违法吗,云服务器搭建网站教程,国土资源网站建设方案文章目录 1. 前言2. 常规用法3. 监听对象和route变化4. 使用场景4.1 即时表单验证4.2 搜索联想功能4.3 数据变化联动处理 5. watchEffect详解5-1 基本概念5-2 核心用法基础示例#xff1a;自动响应依赖变化处理异步副作用停止监听与清理副作用 5-3 高级场景应用监听多个响应式… 文章目录 1. 前言2. 常规用法3. 监听对象和route变化4. 使用场景4.1 即时表单验证4.2 搜索联想功能4.3 数据变化联动处理 5. watchEffect详解5-1 基本概念5-2 核心用法基础示例自动响应依赖变化处理异步副作用停止监听与清理副作用 5-3 高级场景应用监听多个响应式依赖处理 DOM 副作用 6. watch与watchEffect的对比选择建议 1. 前言
在 Vue3 中watch 是一个独立的函数用于响应式地监听数据变化并执行回调。与 Vue2 的选项式 API 不同Vue3 的 watch 主要在 Composition API 中使用需要从 vue/composition-api 或 Vue3 核心包中导入。它接收三个参数监听的数据源、回调函数和可选的配置对象。
Vue3 的 watch 具有以下特点
更灵活的监听方式支持监听 ref、reactive 对象和函数返回值明确的依赖声明避免依赖收集问题更强大的配置选项如深度监听、立即执行等
2. 常规用法
在 Vue3 中使用 watch 需要先导入相关函数通常在 setup 函数中使用。watch 第一个参数可以是 ref 类型的数据、响应式对象的属性或者一个返回值的函数。回调函数接收新值和旧值作为参数。
templatediv classhome_boxh1{{ total }}/h1button clickhandleAddTotal增加/button/div
/templatescript
import { ref, watch } from vue;export default {name: Home,setup() {const total ref(0);// 常规监听 ref 类型数据watch(total, (newValue, oldValue) {console.log(旧值, oldValue);console.log(新值, newValue);});const handleAddTotal () {total.value;};return {total,handleAddTotal};}
}
/script3. 监听对象和route变化
Vue3 的 watch 可以监听多种类型的数据包括响应式对象、嵌套属性和路由变化。对于对象类型的监听需要注意深度监听的配置对于路由变化需要使用特定的监听方式。
templatediv classhome_box!-- 页面内容 --/div
/templatescript
import { ref, reactive, watch } from vue;
import { useRoute } from vue-router;export default {name: Home,setup() {// 基本类型const aaa ref(0);// 响应式对象const state reactive({bbb: 0,ccc: {c1: 0,c2: 0},ddd: {d1: 0,d2: {d21: 0}}});// 获取路由实例const route useRoute();// 监听基本类型watch(aaa, (newValue, oldValue) {console.log(aaa 旧值, oldValue);console.log(aaa 新值, newValue);});// 监听基本类型初始化立即执行watch(() state.bbb, (newValue, oldValue) {console.log(bbb 旧值, oldValue);console.log(bbb 新值, newValue);}, { immediate: true });// 监听对象需要深度监听watch(() state.ccc, (newValue, oldValue) {console.log(ccc 旧值, oldValue);console.log(ccc 新值, newValue);}, { deep: true });// 监听对象嵌套属性watch(() state.ddd.d2.d21, (newValue, oldValue) {console.log(d21 旧值, oldValue);console.log(d21 新值, newValue);});// 监听路由变化watch(() route.path, (newPath, oldPath) {console.log(路由旧路径, oldPath);console.log(路由新路径, newPath);});return {aaa,state};}
}
/script4. 使用场景
Vue3 的 watch 在很多场景中都有重要应用特别是在需要响应数据变化并执行副作用的场景中。以下是几个典型使用场景
4.1 即时表单验证
templatediv classhome_boxinput typetext v-modelusernamediv v-ifvalidationError classerror-message{{ validationError }}/div/div
/templatescript
import { ref, watch } from vue;export default {name: FormValidation,setup() {const username ref();const validationError ref();// 监听输入框内容变化即时验证watch(username, (newValue) {if (newValue.length 3) {validationError.value 用户名至少需要3个字符;} else if (newValue.length 20) {validationError.value 用户名不能超过20个字符;} else {validationError.value ;}});return {username,validationError};}
}
/script4.2 搜索联想功能
templatediv classhome_boxinput typetext v-modelsearchKeyworddiv v-ifsearchResults.length 0 classsuggestionsdiv v-forresult in searchResults :keyresult{{ result }}/div/div/div
/templatescript
import { ref, watch } from vue;export default {name: SearchSuggestions,setup() {const searchKeyword ref();const searchResults ref([]);// 监听搜索关键词变化延迟发送请求let searchTimeout;watch(searchKeyword, (newValue) {if (newValue.length 2) {searchResults.value [];return;}// 防抖处理避免频繁请求clearTimeout(searchTimeout);searchTimeout setTimeout(() {// 模拟API请求searchResults.value [${newValue} 相关结果1,${newValue} 相关结果2,${newValue} 相关结果3];}, 500);});return {searchKeyword,searchResults};}
}
/script4.3 数据变化联动处理
templatediv classhome_boxdivlabel宽度/labelinput typenumber v-modelwidth/divdivlabel高度/labelinput typenumber v-modelheight/divdiv面积{{ area }}/div/div
/templatescript
import { ref, watch } from vue;export default {name: DimensionCalculator,setup() {const width ref(10);const height ref(20);const area ref(0);// 监听宽度和高度变化计算面积watch([width, height], ([newWidth, newHeight]) {area.value newWidth * newHeight;});return {width,height,area};}
}
/script5. watchEffect详解
5-1 基本概念
watchEffect 是 Vue3 中 Composition API 提供的响应式副作用监听函数与 watch 的主动监听不同它会自动追踪回调函数中使用的响应式依赖当依赖变化时触发回调。其核心特点包括
自动依赖收集无需显式声明监听目标回调内使用的响应式数据会被自动追踪初始化立即执行默认在组件挂载后立即执行一次回调用于处理初始依赖的副作用简洁的语法适用于依赖多个响应式数据的场景避免重复声明监听源
5-2 核心用法
基础示例自动响应依赖变化
templatediv classhome_boxh3计数器{{ count }}/h3h3翻倍值{{ doubleCount }}/h3button clickcount1/button/div
/templatescript
import { ref, watchEffect } from vue;export default {name: WatchEffectDemo,setup() {const count ref(0);const doubleCount ref(0);// watchEffect 会自动监听 count 的变化watchEffect(() {console.log(依赖变化触发回调);doubleCount.value count.value * 2;});// 初始化时立即输出// 控制台打印依赖变化触发回调return {count,doubleCount};}
}
/script处理异步副作用
templatediv classhome_boxinput v-modelsearchText placeholder搜索...div v-ifloading加载中.../divdiv v-else-ifsearchResults.length 0ulli v-foritem in searchResults :keyitem{{ item }}/li/ul/divdiv v-else无搜索结果/div/div
/templatescript
import { ref, watchEffect } from vue;export default {name: SearchEffect,setup() {const searchText ref();const searchResults ref([]);const loading ref(false);watchEffect(async onInvalidate {// 当 searchText 变化时先清除之前的定时器let timeout;onInvalidate(() clearTimeout(timeout));if (searchText.value.length 2) {searchResults.value [];return;}loading.value true;// 模拟异步搜索timeout setTimeout(async () {try {// 模拟API请求const response await new Promise(resolve {setTimeout(() {resolve([${searchText.value} 结果1,${searchText.value} 结果2,${searchText.value} 结果3]);}, 500);});searchResults.value response;} catch (error) {console.error(搜索失败, error);} finally {loading.value false;}}, 300);});return {searchText,searchResults,loading};}
}
/script停止监听与清理副作用
templatediv classhome_boxbutton clicktoggleWatch{{ isWatching ? 停止监听 : 开始监听 }}/buttondiv计数器{{ count }}/div/div
/templatescript
import { ref, watchEffect } from vue;export default {name: WatchEffectControl,setup() {const count ref(0);const isWatching ref(true);let watcher null;// 条件性创建 watchEffectconst toggleWatch () {if (isWatching.value) {// 启动监听watcher watchEffect(() {console.log(监听中count:, count.value);});} else {// 停止监听watcher watcher();}isWatching.value !isWatching.value;};return {count,isWatching,toggleWatch};}
}
/script5-3 高级场景应用
监听多个响应式依赖
templatediv classhome_boxdivlabel宽度/labelinput typenumber v-modelwidth/divdivlabel高度/labelinput typenumber v-modelheight/divdiv面积{{ area }}/divdiv周长{{ perimeter }}/div/div
/templatescript
import { ref, watchEffect } from vue;export default {name: DimensionCalculator,setup() {const width ref(10);const height ref(20);const area ref(0);const perimeter ref(0);// 同时监听 width 和 height 的变化watchEffect(() {area.value width.value * height.value;perimeter.value 2 * (width.value height.value);});return {width,height,area,perimeter};}
}
/script处理 DOM 副作用
templatediv classhome_box refcontainerh3滚动位置{{ scrollY }}/h3/div
/templatescript
import { ref, onMounted, watchEffect } from vue;export default {name: ScrollEffect,setup() {const container ref(null);const scrollY ref(0);onMounted(() {// 监听容器滚动事件watchEffect(onInvalidate {if (!container.value) return;const handleScroll () {scrollY.value container.value.scrollTop;};container.value.addEventListener(scroll, handleScroll);// 组件卸载或依赖变化时清理事件onInvalidate(() {container.value.removeEventListener(scroll, handleScroll);});});});return {container,scrollY};}
}
/script6. watch与watchEffect的对比
特性watchwatchEffect依赖声明方式显式指定监听的数据源ref、reactive 属性、函数返回值隐式收集回调函数中使用的响应式依赖初始化执行默认不执行需通过 immediate: true 配置初始化时立即执行一次回调参数接收新值和旧值 (newValue, oldValue)不接收参数通过闭包访问最新值适用场景监听特定数据的变化需要获取新旧值对比处理与多个响应式数据相关的副作用无需明确依赖性能优化可精确控制监听目标避免无效触发依赖收集可能包含不必要的响应式数据需注意副作用清理语法复杂度语法相对繁琐需声明监听源和配置项语法简洁适合快速实现响应式副作用异步处理更适合处理需要等待特定数据变化的异步操作适合处理随依赖变化自动更新的异步副作用如API请求、DOM操作
选择建议
使用 watch 需要明确知道监听的数据源只在特定数据变化时执行回调需要获取变化前后的新旧值对比 使用 watchEffect 处理与多个响应式数据相关的副作用初始化时需要立即执行一次副作用希望以更简洁的方式实现响应式逻辑
// 场景监听用户登录状态并请求用户数据
setup() {const isLoggedIn ref(false);const userData ref(null);// 使用 watch 监听登录状态变化watch(isLoggedIn, (newVal) {if (newVal) {fetchUserData(); // 只在登录状态变化时请求}});// 使用 watchEffect 自动响应视图更新watchEffect(() {document.title 用户状态: ${isLoggedIn.value ? 已登录 : 未登录};});
}本次分享就到这儿啦我是鹏多多如果您看了觉得有帮助欢迎评论关注点赞转发我们下次见~
往期文章
vue中ref的详解以及react的ref对比css使用aspect-ratio制作4:3和9:16和1:1等等比例布局Web前端页面开发阿拉伯语种适配指南flutter-使用extended_image操作图片的加载和状态处理以及缓存和下载flutter-制作可缩放底部弹出抽屉评论区效果flutter-实现Tabs吸顶的PageView效果Vue2全家桶Element搭建的PC端在线音乐网站助你上手Vue3全家桶之Vue3教程超详细vue组件通信的10种方式超详细Vuex手把手教程使用nvm管理node.js版本以及更换npm淘宝镜像源vue中利用.env文件存储全局环境变量以及配置vue启动和打包命令
个人主页
CSDNGitHub掘金
