Question

让计算属性对DOM属性更改做出反应的推荐方法是什么？

我的情况是这样的：
我有一个基于在DOM中找到的值的计算属性（例如元素宽度）视图更新后，DOM属性会发生变化现在，由于DOM更改，计算属性不会更新。

我使用simplified example创建了一个代码集来说明问题。在示例中，我强制计算属性使用'dummy'属性进行更新，该属性在'updated'钩子中发生变化。

updated(){
  console.log('updated')
  this.dummy= this.dummy * -1
},
computed:{
  width(){
    console.log('computed')
    const w = (this.$refs.square || {}).clientWidth
    return w + this.dummy * 0
  }
}

我确实理解，如果一个属性更新对DOM更改做出反应，并且DOM更新对属性更改做出反应，那么它就没有尽头了。

那么，是否有任何干净的方法来保持两个同步？

谢谢

Answer 1

您通常不会依赖DOM属性;你通常会让DOM完全由数据决定。这样你就不会遇到这个问题。

也就是说，以额外渲染为代价，您可以使用$nextTick保持属性同步。

data:{
  size:20,
  width: 20
},
methods:{
  onInput(e){
    this.size =e.target.value
    this.$nextTick(() => this.width = (this.$refs.square || {}).clientWidth)
  }
}

完全消除你的计算。

更新了pen。

基于DOM的计算属性，在* render之后更新*

1 个答案: