动态修改 height，无法监听到 height 变化

[luxiangqiang]

描述错误

当我动态的修改 :height="height" 中的 height 时，drager 高度无变化。

重现步骤

动态的改变 height 一下。

预期行为

drager 高度会随着 height 动态的变化。

截图

我能确保 itemB 是响应式的，值已经确保改变了。

环境信息

• 操作系统: [e.g. mac ]
• 浏览器: [e.g. Chrome 79]
• 其他信息:

其他上下文

watch( () => [props.width, props.height, props.left, props.top, props.angle], ([width, height, left, top, angle], [oldWidth, oldHeight, oldLeft, oldTop, oldAngle]) => { if (width !== oldWidth) { dragData.value.width = width } if (height !== oldHeight) { dragData.value.height = height } if (left !== oldLeft) { dragData.value.left = left } if (top !== oldTop) { dragData.value.top = top } if (angle !== oldAngle) { dragData.value.angle = angle } } )

watch( () => dragData.value, (val) => { emit('change', { ...val }) }, { deep: true } )

当我动态的改变 :height 时，在监听的 @change 中 val 返回的 height 还是初始值。

目前猜测：

1、动态改变 :height prop 时，第一个 watch 函数（监听 props）被触发。 2、这个函数更新了 dragData.value.height。 3、然后第二个 watch 函数（监听 dragData.value）被触发。 4、然而，由于 Vue 为了性能会批量更新，第二个 watch 函数中的 emit('change', { ...val }) 可能在 dragData.value 更新新的高度之前被调用。