计算属性和侦听属性

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

  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;
});
相关推荐
Jokerator1 分钟前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆7 分钟前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
叹一曲当时只道是寻常10 分钟前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang
超级土豆粉15 分钟前
npm 包 scheduler 介绍
前端·npm·node.js
bug爱好者16 分钟前
原生小程序如何实现跨页面传值
前端·javascript
随笔记19 分钟前
uniapp开发的小程序输入框在ios自动填充密码,如何欺骗苹果手机不让自动填充
前端·ios·app
bug爱好者25 分钟前
原生微信小程序最实用的工具函数合集
前端·javascript
3Katrina28 分钟前
JS事件机制详解(2)--- 委托机制、事件应用
前端·javascript·面试
Allen Bright33 分钟前
【CSS-15】深入理解CSS transition-duration:掌握过渡动画的时长控制
前端·css
张鑫旭34 分钟前
40岁老前端2025年上半年都学了什么?
前端