vue ref属性_模板中引入计算属性为什么不用 .value

最新推荐文章于 2024-03-21 14:37:00 发布

weixin_39621185

最新推荐文章于 2024-03-21 14:37:00 发布

阅读量1k

点赞数

文章标签： vue ref属性

本文链接：https://blog.csdn.net/weixin_39621185/article/details/111324545

版权

本文探讨了在Vue.js模板中使用计算属性时，为何不需要手动添加.value。内容涉及计算属性的原理，模板编译过程，以及响应式处理机制。通过源码分析，解释了模板中直接访问计算属性能获取最新值的原因，强调了解析框架内部细节的重要性。

摘要由CSDN通过智能技术生成

Hello，各位小伙伴，接下来的一段时间里，我会把我的课程《Vue.js 3.0 核心源码解析》中问题的答案陆续在我的公众号发布，由于课程的问题大多数都是开放性的问题，所以我的答案也不一定是标准的，仅供你参考喔。

本期的问题：computed 函数返回的对象实际上劫持的是 value 属性的 getter 和 setter，但为什么我们在组件的模板中访问一个计算属性变量，不用手动在后面加 .value 呢？

我们先简单回顾一下 Vue.js 3.0 中 computed 计算属性的使用方法：

import { reactive, computed } from 'vue'

const state = reactive({
     
  count: 0,
})

const double = computed(() => state.count * 2)

这个 computed 返回了什么? 如果猜一下 computed 内部是如何实现的，我们可能会想出下面这样的方案:

// 简化的伪代码
function computed(getter) {
     
  let value
  watchEffect(() => {
     
    value = getter()
  })
  return value
}

但我们知道它不会正常工作：如果 value 是一个例如 number 的基础类型，那么当被返回时，它与这个 computed 内部逻辑之间的关系就丢失了！这是由于 JavaScript 中基础类型是值传递而非引用传递。

为了确保始终可以读取到最新的计算结果，我们需要将这个值上

关注