Vuer们 ，关于Vue中computed定义的计算属性 返回 一个函数的疑惑？

  • Z时代
  • 2024-03-13
  • 分类：IT

code

<template>
  <div>computedPropA:{{ computedPropA("oup") }}</div>
  <el-button @click="handleClick">点击</el-button>
</template>
<script>
  //响应式属性
  const beforeData = ref("")
  //计算属性
  const computedPropA = computed(() => {
    console.log("执行计算函数，重新计算 计算属性：computedPropA")
    //直接返回一个函数对象
    return (data) => {
      return data + beforeData.value
    }
  })
  function handleClick() {
    //随机生成字符串
    let randomString = $utils.randomString(5);
    beforeData.value = randomString;
  }
  //监听计算属性
  watch(computedPropA,(newVal, oldVal) => {
    console.log("computedPropA watch ", newVal, oldVal)
  })
</script>

问题

在这个场景中， 计算属性返回了一个函数对象，在dom模板中 使用这个计算属性需要以函数的形式使用。
对于上面的场景有几个问题：

  1. 计算属性返回了函数对象，函数对象内部使用到了响应式数据，那么响应式数据更新的时候，该计算属性computed函数的参数getter函数是否会被重新执行？
  2. 响应式数据更新时 ，是否会引起dom中 重新执行 computedPropA("oup") 这个函数，重新计算。
  3. 响应式数据更新时 ，watch 计算属性是否 会执行。

实际测试结果：
1.计算属性只会被定义一次，computed函数的参数getter函数 不会随着beforeData的变化而重新执行。
这一点理解起来还凑合。简单理解computed的参数函数中没有使用到响应式属性，所以beforeData的变化不会引起 计算属性被重新计算。 但是深究起来 这个计算属性到底有没有依赖到响应式属性？

2.dom 会重新计算，这个不理解。

3.watch不会执行。原因见1.

各位vuer来帮忙解答一下，拜托了.

补充一个关联问题

在上面的问题中是 返回了一个函数，如果 computed 返回一个 普通的对象

const computedPropB = computed(() => {
  return {
    data: "abc",
  }
})

然后 通过 按钮点击的时候 给这个 computedPropB 随机增添属性名和属性值。

function handleClick() {
  //随机生成字符串
  let randomString = $utils.randomString(5);
  // beforeData.value = randomString;
  let propName = $utils.randomString(5);
  let propvalue = $utils.randomString(3);
   //随机新增属性
  computedPropB.value[propName] = propvalue
}

dom模板中 <div>computedPropB:{{ computedPropB }}</div> 是否会实时更新？

补充问题 新开了 一个问题:
https://segmentfault.com/q/1010000044258428

回答：

1、不会被重新执行，vue的依赖收集过程，是看computed运行的过程中哪些响应式变量被使用到了，在这个例子中computed运行到return就结束了，收集不到下面的beforeData
2、整个template是一个watch，里面也是存在依赖收集的，无论是computedPropA还是其他响应式变量发生变化，这个watch都会重新运行，所以更新是整个组件的更新，只是里面有些内容没变化，所以运行到computedPropA位置处，会执行这个函数
3、见1，其实没有收集到beforeData这个依赖

回答：

同意楼上的，
computed 计算属性你输出函数干嘛？
不是输出 String | Number | Object | Boolean 这些的吗？

// 标准用法
computedPropA = computed(() => `A${beforeData.value}`)
computedPropB = computed(() => `${computedPropA}${beforeData.value}`)
// 这样写不香吗？

以上是 Vuer们 ，关于Vue中computed定义的计算属性 返回 一个函数的疑惑？ 的全部内容， 来源链接： utcz.com/p/934961.html

回到顶部