如何防止 Computed 属性在 vue.js 中未定义？答案

【问题标题】：How to prevent Computed property getting undefined in vue.js?如何防止 Computed 属性在 vue.js 中未定义？
【发布时间】：2020-09-29 23:46:13
【问题描述】：

我正在使用计算属性计算容器的宽度和高度，并将其分配给 vue js 中的画布。


export default {
...
  computed: {
    dimensions() {
      return document.getElementById(
        'canvas-container'
      );
    },
  },
...
}

<div id="canvas-container">
  <canvas
    v-bind:id="id"
    :height="dimensions.clientHeight"
    :width="dimensions.clientWidth"
  ></canvas>
</div>

但问题是我收到了一个未定义的错误，例如：无法读取 null 的属性 clientHeight。

我怎样才能避免这种情况？

【问题讨论】：

计算值的组件是包含canvas-container的组件吗？

标签： vue.js

【解决方案1】：

canvas-container 元素在 dimensions 计算属性访问它时还不存在。第一个渲染过程会生成虚拟 DOM，但尚未创建实际的 DOM 节点。

您需要推迟访问元素，直到组件已安装并且 DOM 元素将存在。

这里没有使用计算属性，因为 DOM 元素不是响应式的（当元素调整大小时它不会自动更新）。

如果可能，请使用ref 而不是getElementById。

new Vue({
  el: '#app',
  
  data: {
    width: 0,
    height: 0,
  },
  
  mounted() {
    // Element is now available
    const el = this.$refs.el
    this.width = el.clientWidth
    this.height = el.clientHeight
  }
})

#app {
  border: 1px solid black;
  width: 200px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" ref="el">
  Element size: {{ width }} x {{ height }}
</div>

如果您需要自动更新尺寸，则必须使用其他机制来观察尺寸变化，例如窗口调整大小侦听器或ResizeObserver。

【讨论】：