Vue计算属性computed：可写与只读的区别

（1）

javascript 复制代码

const dialogVisible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
})

（2）

javascript 复制代码

const dialogVisible = computed(() => {
    return props.modelValue
})

在Vue项目里使用computed，第一种方式和第二种方式有什么区别？这里浅浅的说一下。

这两种 computed 的写法核心区别在于是否支持双向修改。

写法 1：带 getter/setter 的「可写计算属性」

javascript 复制代码

const dialogVisible = computed({
  get: () => props.modelValue,  // 读取值时执行
  set: (val) => emit('update:modelValue', val)  // 修改值时执行
})

这种是带 setter 的计算属性，也叫「可写计算属性」，核心特点：

get 函数：负责读取值（当你访问 dialogVisible.value 时触发），这里是读取父组件传入的 modelValue；
set 函数：负责修改值（当你给 dialogVisible.value = 新值 时触发），这里通过 emit 把新值传递给父组件，实现「看似修改子组件值，实则同步到父组件」的效果；
典型场景：Vue 子组件中实现 v-model 双向绑定（比如你这里的弹窗显隐控制）。

写法 2：只有 getter 的「只读计算属性」

javascript 复制代码

const dialogVisible = computed(() => {
  // 这里只有「读取逻辑」，本质等价于只写了 get 函数
  return props.modelValue
})

这种是只读计算属性（默认只有 getter），核心特点：

假设你做了一个弹窗子组件，父组件用 v-model:visible="showDialog" 控制显隐：

用第一种写法（可写）：你在子组件里写 dialogVisible.value = false，能通过 emit 通知父组件把 showDialog 改成 false，实现弹窗关闭（双向同步）；
用第二种写法（只读）：你在子组件里写 dialogVisible.value = false，会直接报错，因为这个计算属性只能读、不能改。

其实第二种写法是第一种的「简写形式」，等价于

javascript 复制代码

const dialogVisible = computed({
  get: () => {
    return props.modelValue
  }
  // 没有 set 函数，默认只读
})

功能核心 ：带 get/set 的是「可写计算属性」（支持读写），单函数的是「只读计算属性」（仅支持读）；
使用场景 ：需要双向修改（如子组件实现 v-model）用第一种，仅需计算展示值（如统计、拼接）用第二种；
关键提醒 ：只读计算属性强行赋值会报错，可写计算属性的 set 里通常需要通过 emit/store 等方式修改源数据（不能直接改 props）。