使用 Composition API 在 Vue3 中输入模板引用时的最佳实践是什么？

Question

我已经开始开发一个项目，并决定将 Vue3 与 Composition API 和 Typescript 结合使用。我项目的第一步是在屏幕上渲染一个足球场，我使用

HTMLCanvasElement

来完成此操作。为了访问我的

<script>

标签中的各种属性，我为其设置了一个模板引用。正如 Vue 文档所建议的，我将其声明为

const canvas = ref<HTMLCanvasElement | null>(null)

。然而，现在我有一整堆用红色下划线的代码，因为，这取决于

canvas

的值不是

null

。

我的问题是：我是否应该在代码中出现

?

的地方添加

canvas

标志，如

canvas.value?.width

中那样？或者我应该在每个方法的开头添加

if

语句来检查

canvas.value

是否为

null

？

这是TS代码。错误出现在

render

方法的前 3 行

const canvas = ref<HTMLCanvasElement | null>(null);

function fitToContainer(canvas : HTMLCanvasElement){
    canvas.width  = canvas.offsetWidth;
    canvas.height  = canvas.offsetHeight;
}

function render(ctx: CanvasRenderingContext2D) {
    // Adjusting the canvas to the right dimenstions
    fitToContainer(canvas.value);
    const canvasWidth = canvas.value.width;
    const canvasHeight = canvas.value.height;

    // ---------------- FILL FIELD WITH COLOR ----------------
    ctx.fillStyle = "#3bad59";
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

    // ---------------- DRAW LINES ----------------
}

Answer 1

正确的使用时间是在元件贴装后，所以你需要选择正确的时间但使用？或者如果。

import { onMounted } from 'vue'; 
// ...your code 
onMounted(()=>{ 
render()
})