VUE3的computed()使用场景

接受一个 getter 函数,返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 getset 函数的对象来创建一个可写的 ref 对象。

1.底层解析:类型

复制代码
  // 只读
  function computed<T>(
    getter: (oldValue: T | undefined) => T,
    // 查看下方的 "计算属性调试" 链接
    debuggerOptions?: DebuggerOptions
  ): Readonly<Ref<Readonly<T>>>

  // 可写的
  function computed<T>(
    options: {
      get: (oldValue: T | undefined) => T
      set: (value: T) => void
    },
    debuggerOptions?: DebuggerOptions
  ): Ref<T>

2.创建一个只读的计算属性 ref:

复制代码
  const count = ref(1)
  const plusOne = computed(() => count.value + 1)

  console.log(plusOne.value) // 2

  plusOne.value++ // 错误

3.创建一个可写的计算属性 ref:

复制代码
  const count = ref(1)
  const plusOne = computed({
    get: () => count.value + 1,
    set: (val) => {
      count.value = val - 1
    }
  })

  plusOne.value = 1
  console.log(count.value) // 0

4.调试:

复制代码
  const plusOne = computed(() => count.value + 1, {
    onTrack(e) {
      debugger
    },
    onTrigger(e) {
      debugger
    }
  })
相关推荐
YONG823_API4 分钟前
深度探究获取淘宝商品数据的途径|API接口|批量自动化采集商品数据
java·前端·自动化
鱼樱前端4 分钟前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
yzhSWJ20 分钟前
Spring Boot中自定义404异常处理问题学习笔记
java·javascript
小希爸爸30 分钟前
1、中医基础入门和养生
前端·后端
神仙别闹2 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
下雨的Jim2 小时前
前端速成之——Script
前端·笔记
Captaincc2 小时前
使用 Copilot 代理模式构建着陆页
前端·ai编程·github copilot
zyk_5202 小时前
前端渲染pdf文件解决方案-pdf.js
前端·javascript·pdf
Apifox.2 小时前
Apifox 4月更新|Apifox在线文档支持LLMs.txt、评论支持使用@提及成员、支持为团队配置「IP 允许访问名单」
前端·人工智能·后端·ai·ai编程
划水不带桨3 小时前
大数据去重
前端