用aspx做的网站,可以接单包工的平台,建个什么网站好呢,全屋定制十大品牌排行榜前十名Vue 3 中 computed 与 watch 深度解析
在 Vue 3 组合中#xff0c;响应式工具的类型安全使用至关重要。以下是详细说明
一、watch 侦听器
1. 基础类型监听
templatediv实际参数1{{count}}/divdivbutton clickcount点…Vue 3 中 computed 与 watch 深度解析
在 Vue 3 组合中响应式工具的类型安全使用至关重要。以下是详细说明
一、watch 侦听器
1. 基础类型监听
templatediv实际参数1{{count}}/divdivbutton clickcount点击/button/div
/templatescript setup langts
import {reactive,ref,watch
} from vue;const count refnumber(0)
const state reactive({items: [] as string[]});watch(count, (newVal:number, oldVal:number) {state.items.push(String(count.value))console.log(newVal, oldVal , newVal, oldVal)
})watch(() state.items, () {console.log(state.items , state.items)
},{deep: true})/script
2. 多源监听
templatediv实际参数1{{count}}/divdivbutton clickcount点击/button/div
/templatescript setup langts
import {reactive,ref,watch
} from vue;const count refnumber(0)
const state reactive({items: [] as string[]});watch(count, (newVal:number, oldVal:number) {state.items.push(String(count.value))console.log(newVal, oldVal , newVal, oldVal)
})watch(() state.items, () {console.log(state.items , state.items)
},{deep: true})watch([count, state], ([newCount, newState]:[number, object], [oldCount, oldState]:[number, object]) {console.log([newCount, newState], [oldCount, oldState] , newCount, newState, oldCount, oldState)
})
/script3. 深度监听对象
templatediv实际参数1{{product}}/divdivbutton clickproduct.price点击/button/div
/templatescript setup langts
import {reactive,watch
} from vue;
interface Product {id: number,price: number,name: string,specs: {color: string,weight: number}
}const product reactiveProduct({id: 1,price: 131,name: Bwm,specs: {color: red,weight: 80}
})watch(() product.price, // 创建新引用触发深度监听(newProduct,oldProduct) {console.log(newVal,oldVal , newProduct,oldProduct)},{deep: true})
/script
二、watchEffect 高级用法
watchEffect() 允许我们自动跟踪回调的响应式依赖,且会立即执行。
1. 基本用法
templatediv实际参数1{{product}}/divdivbutton clickproduct.price点击/button/div
/templatescript setup langts
import {reactive,ref,watch, watchEffect
} from vue;
interface Product {id: number,price: number,name: string,specs: {color: string,weight: number}
}const product reactiveProduct({id: 1,price: 131,name: Bwm,specs: {color: red,weight: 80}
})
const totalPrice refnumber(0)watchEffect(() {totalPrice.value product.price 2console.log(totalPrice , totalPrice)
})
/script
2. 清理副作用
templatediv实际参数1{{product}}/divdivbutton clickproduct.price10点击/button/div
/templatescript setup langts
import {reactive,ref,watchEffect,onWatcherCleanup
} from vue;interface Product {id: number,price: number,name: string,specs: {color: string,weight: number}
}const product reactiveProduct({id: 1,price: 131,name: Bwm,specs: {color: red,weight: 80}
})
const totalPrice refnumber(0)watchEffect(() {totalPrice.value product.price 2console.log(totalPrice , totalPrice)onWatcherCleanup(() {console.log(onWatcherCleanup )})
})
/script
三、computed 计算属性
1. 对象类型计算
templatediv实际参数1{{totalPrice}}/divdivbutton clickproduct.price10点击/button/div
/templatescript setup langts
import {reactive,ref,computed
} from vue;
interface Product {id: number,price: number,name: string,specs: {color: string,weight: number}
}const product reactiveProduct({id: 1,price: 131,name: Bwm,specs: {color: red,weight: 80}
})
const totalPrice computednumber(()product.price 10)
/script
2. 可写计算属性
templatediv{{fullName}}/divdiv姓名 el-input v-modelfullName//div
/templatescript setup langts
import {reactive,ref,computed
} from vue;
const firstName refstring(Jane)
const lastName refstring(Smith)const fullName computedstring({get() {return ${firstName.value} ${lastName.value}},set(fullName:string) {const [newFirstName, newLastName] fullName.split( )firstName.value newFirstNamelastName.value newLastName}
})
/script
四、computed vs watch vs watchEffect 对比
特性computedwatchwatchEffect目的派生值响应变化执行操作自动追踪依赖执行操作返回值ref对象停止函数停止函数初始化执行立即计算可配置(immediate)立即执行依赖声明自动显式指定自动缓存✅❌❌异步支持❌✅✅清理机制❌✅✅调试钩子❌✅✅适合场景数据转换/格式化精确控制的操作自动追踪依赖的副作用
总结 computed 用于派生状态具有缓存机制适合数据转换和格式化模板中优先使用 watch 用于执行副作用提供精确控制适合异步操作、DOM操作需要显式声明依赖 watchEffect 自动追踪依赖立即执行适合多个依赖的简单副作用提供清理机制
黄金法则
需要派生值 → 用 computed需要响应变化执行操作 → 用 watch 或 watchEffect需要精确控制依赖 → 用 watch需要自动追踪多个依赖 → 用 watchEffect避免在 computed 中产生副作用总是在副作用中清理资源
通过合理选择和使用这些 API可以构建出高效、可维护的 Vue 3 应用程序。
