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

全能人才

计算属性一同提了两个问题: 1.计算属性返回一个函数对象的问题, 2.就是当前的问题。 动态对计算属性对象新增 属性 是否会被更新到dom的问题 ## 演示项目 [https://stackblitz.com/edit/vitejs-vite-cz1g9d?file=src%2FApp...](https://link.segmentfault.com/?enc=CGiyxmlKoDPekm5ftn1pHg%3D%3D.8ISDILtss%2BsHRC4C9Jb5Rk5F%2B8Jhr1u2o4FPSAWfuYOo5CNLLZiUqhttmgdhWDEl2EQBjl0r12uxHwsbSuh0sYk9DrJ5MiF%2FBHLISU0M2D4%3D) 项目中 演示了 计算属性返回一个普通的对象。然后 在点击事件中,对computedB这个计算属性动态新增属性,是否会被及时渲染到dom上。 关键点在 app.vue的handleClick方法中 //-------------->>>>这行代码很神奇---- //1.如果你把他打开 ,点击按钮就能拿看到 计算属性B上动态新增的属性 //2.如果你把他关上 就看不到计算属性B上动态新增的属性 //3,如果你把他打开,但是在template中 注释掉对 计算属性A的渲染,就看不到计算属性B上动态新增的属性。 beforeData.value = propvalue; ## 问题 1。按照我的理解 ,因为计算属性 computedB 中不依赖任何响应式属性,所以给 computedB动态新增属性 不会引起dom的更新。 2. 另外一种理解: computedB本身也是响应式的,所以 computedB.value[xx]=aa,也能够监听到并更新到dom上。 上面两种解释我觉得都有道理,vue了解不深,不知道应该怎么理解。 3. 从项目的实际效果来看,好像并不单纯 是响应式属性的问题。 好像是 computedPropA:{{ computedPropA('oup') }} 这个代码会决定 computedB 计算属性在dom中是否更新。

阅读量:334

点赞量:10

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