Vue3中的computed 与 watch 的区别

Vue3中的computed 与 watch 的区别当你想要合成一个新数据用来显示时选computed。当你想要在数据变化时搞点事情调接口、存本地、操作 DOM选watch。computed计算属性computed主要用于数据的衍生与转换。它基于现有的响应式数据计算出一个新值并且会自动缓存计算结果。只有当它依赖的数据源发生变化时才会重新计算。// 写法 1函数形式最常用只读computed:{计算属性名(){// 依赖 this.xxx 数据return计算结果;}}// 写法 2对象形式可读可写computed:{计算属性名:{get(){return计算结果;},set(val){// 当你尝试修改这个计算属性时触发}}}应用场景购物车总价templatedivh2购物车/h2ulliv-for(item, index) in list:keyindex{{ item.name }} - {{ item.price }} xbuttonclickitem.count 1 ? item.count-- : -/button{{ item.count }}buttonclickitem.count/button/li/ul!-- 这里直接使用计算属性 --p总价{{ totalPrice }}/p/div/templatescriptexportdefault{data(){return{list:[{name:苹果,price:10,count:2},{name:香蕉,price:5,count:3}]};},computed:{// 只要 list 里任何商品的 price 或 count 变了totalPrice 自动更新totalPrice(){console.log(computed 重新计算了);// 验证缓存机制returnthis.list.reduce((sum,item)sumitem.price*item.count,0);}}};/script为什么用 computed 而不用 methods如果你在 methods 里定义一个getTotalPrice()函数虽然也能算出结果但computed有缓存。在上面的例子中如果你在页面多处调用totalPricecomputed 只会计算一次而 methods 每调用一次就会执行一次函数性能更低。watch侦听器watch主要用于观察某个数据的变化并执行特定的副作用。它关注的是 “数据变了之后要做什么”而不是为了得到一个返回值。这里的 “副作用” 通常指异步请求、DOM 操作、数据持久化等。watch:{// 写法 1简单监听数据名(newVal,oldVal){// newVal 是新值oldVal 是旧值// 执行逻辑...},// 写法 2对象形式开启深度监听、立即执行数据名:{handler(newVal,oldVal){// 逻辑...},deep:true,// 深度监听如果监听的是对象内部属性变化也能触发immediate:true// 立即执行页面加载完就先执行一次 handler}}搜索框防抖当用户输入停止后延迟 500ms 再发送请求。templatedivh2搜索电影/h2inputtypetextv-modelsearchTextplaceholder请输入关键词.../pv-ifloading搜索中.../pulv-elseliv-formovie in movies:keymovie.id{{ movie.title }}/li/ul/div/templatescriptexportdefault{data(){return{searchText:,movies:[],loading:false,timer:null};},watch:{// 监听 searchText 的变化searchText(newVal){// 1. 清除上一次的定时器if(this.timer)clearTimeout(this.timer);// 2. 如果输入为空清空列表直接返回if(!newVal){this.movies[];return;}this.loadingtrue;// 3. 设置新的定时器防抖核心this.timersetTimeout((){this.fetchMovies(newVal);},500);}},methods:{fetchMovies(keyword){// 模拟 API 请求console.log(发送请求关键词${keyword});setTimeout((){this.movies[{id:1,title:keyword之传奇诞生},{id:2,title:keyword之王者归来}];this.loadingfalse;},1000);}}};/script为什么这里必须用 watch因为我们需要在数据变化后执行 “延迟” 和 “发请求” 这些异步操作computed内部必须是同步的 return无法处理这种场景。维度computedwatch返回值必须有 return不需要 return缓存有缓存性能优先无缓存变了就执行异步不支持异步支持异步操作场景多对一一个值由多个值计算而来 (ABC)一对多一个值变化影响多个逻辑 (A 变了触发 B、C、D)