vue3 中的 ref 在template中使用必须加.value才生效，为什么？-灵析社区
PunkMaccccc下面按钮，`测试3` 那个 `disabled` 不生效，为什么？但是后面 `{{options.isDisabled}}` 显示是 `false`，必须要像 `测试4` 那样加上 `.value` 才可以，但是 `测试1` 没有加 `.value` 确实正常的，这是为什么？ const isDisabled = ref(false); const options = { options: reactive({ isDisabled: false }), isDisabled: ref(false), } 测试1 {{isDisabled}} 测试2 {{options.options.isDisabled}} 测试3 {{options.isDisabled}} 测试4 {{options.isDisabled.value}}
笑面猫用法就很奇怪，为啥要用普通的对象来包裹一层呢。
一般来说多个 "options" 直接用 "ref" 声明多个变量就可以了呀。
import { ref } from 'vue'
const optionA = ref({
options: { ... },
disabled: false
})
const optionB = ref({
options: { ... },
disabled: false
})
测试A {{optionA.disabled}}
测试B {{optionB.disabled}}
如果还是想保留在原本的options的情况下，用 "ref" 或者 "readonly" 包裹以下就行了
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
测试1 {{isDisabled}}
测试2 {{options.options.isDisabled}}
测试3 {{options.isDisabled}}
测试4 {{options.isDisabled}}
***
EDIT
如果说需要有不同的方法给不同的组件调用就是以下这样组合业务逻辑就好了。
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
测试1 {{optionA.disabled}}
测试2 {{optionB.disabled}}
Vue3中组合式API，其中的一个优势不就是为了解决选项式API中的这个痛点嘛。
"62783026-810e6180-ba89-11e9-8774-e7771c8095d6.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250113/16f763404e69e376b23f6303cd4c1c7a.png)
"#更灵活的代码组织 - 组合式 API 常见问答 | Vue.js" (https://link.segmentfault.com/?enc=z8C52p5sLCM1Ulrg8usvsQ%3D%3D.cIvaGqjJH2rhBzCDr2iv7b3IiryQojZqGNtr%2FfF90K6FGz7pdEh7rf83kSwz%2BjehXeh6Kr5YWe3nEKG%2BRupNn5EpG8taZJgYwdwge4BR7TL%2FjRqxS34Qn78BAaLMOPx%2F)
***
如果说你觉得这样可能一个SFC文件中会有特别多的业务逻辑，可能会觉得不好维护。
如果放在一个对象中维护，IDE就可以把相关业务逻辑的折叠起来。继续按照你原本的开发习惯使用 "readonly" 包裹起来。
或者是把业务逻辑都提取到一个单独的JS文件中，然后 "import" 使用：
import { optionA, onChangeA } from './optionA'
import { optionB, onChangeB } from './optionB'
测试1 {{ optionA.disabled }}
测试2 {{ optionB.disabled }}
// 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" (https://link.segmentfault.com/?enc=0UQAC5rJt7Q3FG8NhLAyVw%3D%3D.52OpODEHNxlqEG4rn2XqmvYUgka54F%2FTszZ6iC2T45Qq02EOHTGAVHh%2Bzw53oI4q0n2e8H1E2XHqUAyOmq4omIbFkwlkvZlZaTTJc62qxmki1xCawr7fxmg9julAyMX3963aw4H5l3FTDpL1v4arDzpSlBLeRTtRFn1PivPrXf1wQVVTyC%2BVd29cW%2BquREyazdjJM2jZdcBU%2FP%2B8PZe5%2FtpxDZgxQHEJ0bduimHjk%2BaHF7emY4O%2FX4Iv4ZR6SSC6bkIepgBeLkyQz%2Fd6b434hQ7bRlotpMSFV0Lz2OTR6OloX%2B3Lh2np%2BNzd7bfbCmkMRRBzL6TuOd9CD9n%2BBBVZ2pCYLUkXZYwXH8sN3zmmshMCEZZUp220EX1ws%2F4e0UMniTno8bYqqXRN9rzCkiW2t6t5KIrO6tVURqr6oXlbU6Mguqa83vXtG25uazzfP6A%2BrZnkm6s4EBBCmguL40TJUJfD94c8uAZGaZzBY2u4448BOT1bEB0DpekXdyQe%2BCN6SF9jMmzPM2spmgayS59%2BYZiZ%2BQ3jzClKBv38pL0V0VTaOPF9TkgRNVSJ6FLsbXYJjQkxIH57KuFWCguLFvTjhrrcXIKLruXl5qkTomrLlHIonVT4NqoXsp4FN1HNolBaC7p47gfD74DfzkACs4gKcyhGXtVOeZ7avHj1iZ2YGT%2B%2F0cSgOUIJUYbWg2A0KB03uC1Al6vJJr%2FuDq7wRG%2B3NZOFO25xaC%2FDIFFUB%2FntuwkZ%2BcXw0r5oVlksdFMZhURTSaYjTgxphmrSkmzMCMuA%2FSoEW83M9dw1v3ieAqHNwdoxa9y4hhXplpOdPCXiUGgjRUcsqsFSiE2JDt6hXLrIkLHyEQ4w0eTwGE8t0MOa4B2IutrIwScxVZt%2BUeQIZhVIOSZEuiYpf15rfQSHZLiVZKlsGVjQ0fGCUsk7vPQCDsY%3D)