Vue.js

Question

我的组件中有以下代码：

computed: {
    gridWidth()  { return (this.$el && this.$el.offsetWidth)  },
    gridHeight() { return (this.$el && this.$el.offsetHeight) },
},
mounted(){
    console.log(this.$el && this.$el.offsetWidth, this.gridWidth, this.$el && this.$el.offsetHeight, this.gridHeight)
},

控制台输出为：

1766 undefined 931 undefined

为什么计算属性未定义？

观察者会是正确的方式吗？为什么以及如何实现？

Answer 1

这基本上与reactivity in Vue的工作原理有关。默认情况下，您的 DOM 不会持续提供更新值。

您可以使用 vm.$nextTick and vm.$watch 在渲染完成后基本上附加一个观察者，或者您可以使用一个小型库来满足您的需求：

vue-resize-directive

Vue.js - 未计算组件高度和宽度

Vue.js - Component Height and Width not computed

computed-properties