Vue <script setup>中如何正确访问computed计算属性

<script setup>是编译期语法糖，代码运行在函数作用域内，不存在选项式API里的组件实例this上下文，因此this.url的写法会直接抛出找不到this的错误。
你直接读取url得到ComputedRefImpl对象是符合预期的：组合式API中computed()返回的是计算属性的响应式引用对象，和ref()的返回值属于同一类响应式引用，要读取实际计算结果需要访问引用的.value属性。

在<script setup>的逻辑代码中，通过计算属性名.value的形式即可访问到计算结果，修正后的代码如下：

<script setup>
import { computed } from 'vue';

const url = computed(() => 'Hallo');

const printUrl = () => {
  // 访问.value获取计算属性的实际值
  console.log(url.value) // 正确输出: Hallo
}
</script>

• 在模板区域使用该计算属性时不需要手动加.value，Vue会自动完成响应式引用的解包，直接写{{ url }}即可渲染出Hallo
• 不要直接对computed返回的引用做普通解构，会丢失响应性，如果需要解构导出响应式值请搭配toRefs使用

内容的提问来源于stack exchange，提问作者Adam