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

相关推荐
试图让你心动19 分钟前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码1 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记1 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏1 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数1 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante2 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam2 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8502 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏3 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪4 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css