Vue中访问计算属性的属性是什么？及非快捷方式的完整路径

问题1：Vue中访问计算属性的属性是什么？ #

在Vue组件内部，默认可通过this.计算属性名直接访问计算属性，这是Vue提供的快捷访问方式。比如定义了名为v的计算属性，直接用this.v即可获取其值。

问题2：不使用快捷方式，如何获取Vue计算属性的值？ #

计算属性的存储逻辑和数据属性不同，它并非直接存在固定对象属性中，而是依赖Vue内部的缓存机制与访问器实现。不同Vue版本的具体访问方式如下：

Vue 2.x 版本 #

Vue 2中，计算属性的缓存值存储在组件实例的_computedWatchers对象内，每个计算属性对应一个Watcher实例，通过Watcher的value属性可拿到当前缓存值。以名为v的计算属性为例：

this._computedWatchers.v.value

注：_computedWatchers是Vue内部私有属性，生产环境不建议直接依赖，但这就是计算属性值的实际存储位置。

Vue 3.x 版本 #

Vue 3采用Proxy实现响应式，计算属性处理逻辑更内敛：

• 若通过Options API的computed选项定义，缓存值可通过组件实例的_setupState对象访问：

  this._setupState.v
  

• 若通过Composition API的computed()创建，计算属性本身是Ref对象，值存储在其value属性中。

同名数据与计算属性的优先级 #

当同时定义同名的数据属性v和计算属性v时，Vue会优先用计算属性覆盖数据属性的快捷访问——this.v会返回计算属性的值，数据属性只能通过this.$data.v或this._data.v访问。若要直接获取计算属性的原始缓存值，需使用上述内部属性路径。

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