vue3 中的 ref 在template中使用必须加.value才生效，为什么？

Question

下面按钮，测试3 那个 disabled 不生效，为什么？但是后面 {{options.isDisabled}} 显示是 false，必须要像 测试4 那样加上 .value 才可以，但是 测试1 没有加 .value 确实正常的，这是为什么？

<script setup>
const isDisabled = ref(false);
const options = {
    options: reactive({
        isDisabled: false
    }),
    isDisabled: ref(false),
}
</script>

<template>
<button type="button" :disabled="isDisabled">测试1 {{isDisabled}}</button>
<button type="button" :disabled="options.options.isDisabled">测试2 {{options.options.isDisabled}}</button>
<button type="button" :disabled="options.isDisabled">测试3 {{options.isDisabled}}</button>
<button type="button" :disabled="options.isDisabled.value">测试4 {{options.isDisabled.value}}</button>
</template>

Answer 1

https://blog.csdn.net/gtLBTNq9mr3/article/details/124937788

Answer 2

用法就很奇怪，为啥要用普通的对象来包裹一层呢。
一般来说多个 options 直接用 ref 声明多个变量就可以了呀。

<script setup>
import { ref } from 'vue'
const optionA = ref({
    options: { ... },
    disabled: false
})
const optionB = ref({
    options: { ... },
    disabled: false
})
</script>

<template>
  <div>
    <button type="button" :disabled="optionA.disabled">
      测试A {{optionA.disabled}}
    </button>
    <button type="button" :disabled="optionB.disabled">
      测试B {{optionB.disabled}}
    </button>
  </div>
</template>

如果还是想保留在原本的options的情况下，用 ref 或者 readonly 包裹以下就行了

<script setup>
import { ref, reactive, readonly } from 'vue'
const isDisabled = ref(false);
const options = readonly({
    options: reactive({
        isDisabled: true
    }),
    isDisabled: ref(false)
})

const onChangeA = () => isDisabled.value = true
</script>

<template>
  <button type="button" :disabled="isDisabled">测试1 {{isDisabled}}</button>
  <button type="button" :disabled="options.options.isDisabled">测试2 {{options.options.isDisabled}}</button>
  <button type="button" :disabled="options.isDisabled">测试3 {{options.isDisabled}}</button>
  <button type="button" :disabled="options.isDisabled" @click="onChangeA">测试4 {{options.isDisabled}}</button>
</template>

---

EDIT

如果说需要有不同的方法给不同的组件调用就是以下这样组合业务逻辑就好了。

<script setup>
import { ref } from 'vue'

// 业务块A
const optionA = ref({
    options: { ... },
    disabled: false
})
const onChangeA = () => optionA.value.disabled = true

// 业务块B
const optionB = ref({
    options: { ... },
    disabled: false
})
const onChangeB = () => optionB.value.disabled = true
</script>

<template>
  <button type="button" :disabled="optionA.disabled" @click="onChangeA">测试1 {{optionA.disabled}}</button>
  <button type="button" :disabled="optionB.disabled" @click="onChangeB">测试2 {{optionB.disabled}}</button>
</template>

Vue3中组合式API，其中的一个优势不就是为了解决选项式API中的这个痛点嘛。

#更灵活的代码组织 - 组合式 API 常见问答 | Vue.js

---

如果说你觉得这样可能一个SFC文件中会有特别多的业务逻辑，可能会觉得不好维护。
如果放在一个对象中维护，IDE就可以把相关业务逻辑的折叠起来。继续按照你原本的开发习惯使用 readonly 包裹起来。
或者是把业务逻辑都提取到一个单独的JS文件中，然后 import 使用：

<script setup>
import { optionA, onChangeA } from './optionA'
import { optionB, onChangeB } from './optionB'
</script>

<template>
  <button type="button" :disabled="optionA.disabled" @click="onChangeA">测试1 {{ optionA.disabled }}</button>
  <button type="button" :disabled="optionB.disabled" @click="onChangeB">测试2 {{ optionB.disabled }}</button>
</template>

// optionA.js
import { ref } from 'vue'
// 业务逻辑A
const optionA = ref({
  options: {},
  disabled: false
})
const onChangeA = () => optionA.value.disabled = true
export { optionA, onChangeA }

// optionB.js
import { ref } from 'vue'
// 业务逻辑B
const optionB = ref({
  options: {},
  disabled: false
})
const onChangeB = () => optionB.value.disabled = true
export { optionB, onChangeB }

�� Vue SFC Playground