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

  • Z时代
  • 2024-02-05
  • 分类：IT

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

1.计算属性返回一个函数对象的问题,https://segmentfault.com/q/1010000044258093
2.就是当前的问题。 动态对计算属性对象新增 属性 是否会被更新到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中是否更新。

回答：

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

以上是 Vuer们 ，关于Vue中 计算属性的另一个问题(动态给计算属性新增属性dom是否会及时渲染)? 的全部内容， 来源链接： utcz.com/p/934960.html

回到顶部