计算属性和侦听属性

使用 计算属性 来描述依赖响应式状态的复杂逻辑
计算属性与方法区别:

  1. computed 是带缓存的,如果被依赖的变量不发生变化,则下次调用 computed 时不会重新计算结果。
    但是 methods 则是每次调用都会重新运行以得出实时的结果。
  2. methods 调用需要加 ()
  3. computed 依赖响应式变量 (ref,reactive) ,不可传值; methods 可以传值
计算属性和侦听属性有什么区别?怎样选择

1、computed不会主动监听数据变化,但是watch会去主动监听,也就是说watch会主动处理数据变化,computed是依赖数据变化才去计算。

2、computed在依赖数据未发生改变时/或者没有依赖数据,自动缓存到应用中,下次获取时不重新计算。

各自使用场景:

watch:适合处理 一个数据影响多个数据,理数据相互独立的场景,主动监听

computed:适合处理多个数据影响一个数据时,数据相互不独立的场景。

复制代码
import { computed, ref } from "vue";
const count = ref(0); //声明
const twofold = computed(() => {
return count.value * 2;
});
相关推荐
小满zs1 小时前
Zustand 第四章(中间件)
前端·react.js
GalaxyPokemon2 小时前
LeetCode - 2. 两数相加
java·前端·javascript·算法·leetcode·职场和发展
dualven_in_csdn5 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友5 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程6 小时前
纯前端做图片压缩
开发语言·前端·javascript
银色的白6 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
应巅6 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
萌萌哒草头将军7 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
Jimmy7 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz7 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html