Vue 3 - 我可以避免在任何地方使用 .value 吗？答案

【问题标题】：Vue 3 - can i avoid using .value everywhere?Vue 3 - 我可以避免在任何地方使用 .value 吗？
【发布时间】：2023-02-02 01:29:27
【问题描述】：

我是 Vue 3 的新手，我在理解组合 API 的一些概念方面遇到了很多困难。我正在尝试将我正在使用的库从 vue 2 移植到 vue 3，并在父元素中将名为 layout 的反应属性传递给子组件。

所以在父组件中，我像这样将 layout 返回给孩子：

setup(props){
    const layout = ref({'width': 10, ... })
    return {
        layout,
        ...
    }
}

问题是，为了从任何子组件访问width或layout中的任何其他反应值，我需要使用语法layout.value.width。这是一个很大的问题，因为在整个项目中layout 都被layout.width 引用，这意味着我需要在每个对layout 的引用中添加一个.value，并对我的所有其他反应变量执行相同的操作我传递给我的孩子组件。有什么办法可以避免这种情况，或者我只是没有从组合 api 中获得一些重要的概念？

【问题讨论】：

take a look at this post。希望能帮助到你

标签： javascript vue.js

【解决方案1】：

至少有两种方式：

是的。您可以在没有 .value 的情况下工作。你必须使用vue experimental version
或者
1. 您可以创建一个 reactive 变量，例如：
```
<script setup>
import { reactive } from 'vue'

const layout = reactive({'width': 10, ... })
</script>
```

【讨论】：

谢谢！反应式和参考有什么区别？
在我的理解中，它就像：ref 用于单个值，例如一个数字，一个布尔值，reactive 用于一个对象。有几篇关于此的文章。

【解决方案2】：

反应性转换功能将使用 $ref() 自动将 .value 附加到您的反应性变量上。此实验性功能已宣布将逐步淘汰 Vue 核心功能。相反，使用稳定的 Vue Macros 插件来消除 .value 语法。 https://vue-macros.sxzz.moe/features/reactivity-transform.html

【讨论】：