Vuer们 ,关于Vue中 计算属性的另一个问题(动态给计算属性新增属性dom是否会及时渲染)?

作者站长头像
站长
· 阅读数 5

计算属性一同提了两个问题:

1.计算属性返回一个函数对象的问题,https://segmentfault.com/q/10100000442580932.就是当前的问题。 动态对计算属性对象新增 属性 是否会被更新到dom的问题

演示项目

https://stackblitz.com/edit/vitejs-vite-cz1g9d?file=src%2FApp...

项目中 演示了 计算属性返回一个普通的对象。然后 在点击事件中,对computedB这个计算属性动态新增属性,是否会被及时渲染到dom上。

关键点在 app.vue的handleClick方法中

  //-------------->>>>这行代码很神奇----
  //1.如果你把他打开 ,点击按钮就能拿看到 计算属性B上动态新增的属性
  //2.如果你把他关上 就看不到计算属性B上动态新增的属性
  //3,如果你把他打开,但是在template中 注释掉对 计算属性A的渲染,就看不到计算属性B上动态新增的属性。
  beforeData.value = propvalue;

问题

1。按照我的理解 ,因为计算属性 computedB 中不依赖任何响应式属性,所以给 computedB动态新增属性 不会引起dom的更新。

  1. 另外一种理解: computedB本身也是响应式的,所以 computedB.value[xx]=aa,也能够监听到并更新到dom上。

上面两种解释我觉得都有道理,vue了解不深,不知道应该怎么理解。

  1. 从项目的实际效果来看,好像并不单纯 是响应式属性的问题。 好像是 <div>computedPropA:{{ computedPropA('oup') }}</div> 这个代码会决定 computedB 计算属性在dom中是否更新。
回复
1个回答
avatar
test
2024-06-26

参照你上个问题中我回答的2,template执行中运行了computedPropA函数,而computedPropA函数中运行了beforeData变量,这被收集进updateWatcher的依赖中,当beforeData改变会触发updateWatcher更新,如果你把中的data + beforeData.value换成data + Math.random(),并移除template中computedPropB的使用,就可以看出效果

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容