computed和watch的区别

面试被问到了computed和watch的区别,答得不好,遂整理一下相关知识点

定义

  • computed(计算属性) 计算属性是基于它的依赖进行缓存的"计算值",当它依赖的数据发生变化时,才会重新计算,否则直接使用缓存的值。适合用来根据已有响应式数据"计算"一个新的值。
  • watch(侦听器) 用于声明在数据更改时调用的侦听回调。

使用场景

当模板中的某个值需要通过一个或多个数据计算得到时,就可以使用计算属性,还有计算属性的函数不接受参数;监听属性主要是监听某个值发生变化后,对新值去进行逻辑处理。

  • computed

依赖现有数据计算新值,具有缓存(若依赖的数据不变,computed不会重新计算)。可用于:筛选列表、多个字段组合显示

javascript 复制代码
computed: {
  filteredList() {
    return this.list.filter(item => item.includes(this.keyword));
  },
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}
  • watch

适合侦听数据变化后执行异步或副作用操作(除了本身计算和返回新值,还执行了其他操作)。如:请求接口、手动操作 DOM、本地存储。可深度监听(deep: true)或立即触发(immediate: true

watch能够同时监听多个数据源的变化,执行相应的回调。

javascript 复制代码
import { ref, watch } from 'vue';

const count = ref(0);
const double = ref(0);

// 创建多个数据源的侦听器
watch([count, double], ([newCount, newDouble], [oldCount, oldDouble]) => {
  console.log(`count变化:新值 - ${newCount}, 旧值 - ${oldCount}`);
  console.log(`double变化:新值 - ${newDouble}, 旧值 - ${oldDouble}`);
});

面试问题:讲讲computed和watch的区别

三个方面回答:用途、特点和适用场景

computed基于已有数据派生出新数据,有缓存,只在依赖变化并被访问时才会重新计算。适合处理显示在模板上的计算结果、格式转换等

watch在数据变化时执行副作用逻辑,主动响应依赖变化并立即执行函数**,每次都重新执行,不管结果是否变化。适合处理异步请求、动画效果等

相关推荐
abigale031 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘8 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能