Vue3学习笔记 | DIONYSEN BLOG

工作需要学习了前端框架Vue，这是过程中遇到的问题和解决方法的汇总。

组合式API引用canvas

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

Composition API 是 Vue 3 中引入的一组函数式 API，用于替代 Vue 2 中的 Options API。它提供了更灵活、可组合和可重用的方式来组织组件的逻辑代码。

在 Vue 3 的 Composition API 中，我们可以使用 ref 函数来创建一个响应式的引用，它类似于 Vue 2 中的 data 选项。ref 接受一个初始值作为参数，并返回一个包含该值的响应式引用。

在上述代码中，const canvas = ref<HTMLCanvasElement | null>(null) 表示创建了一个名为 canvas 的响应式引用，它的类型为 HTMLCanvasElement | null。HTMLCanvasElement 表示 Canvas 元素的类型，| 表示联合类型，允许 canvas 的值为 HTMLCanvasElement 或 null。在初始化时，canvas 的值被设置为 null。

这样的设置可以让我们在 Vue 3 中使用 Composition API 来追踪和操作 Canvas 元素及其上下文。通过 canvas.value 和 context.value 可以访问引用的实际值，因为 ref 创建的引用是一个包装器。

通过使用响应式引用，我们可以在应用程序中追踪和修改 canvas 和 context 的值，确保任何对它们的更改都能在 Vue 组件中得到反应，并触发相应的更新。

Canvas接口

HTMLCanvasElement：Provides properties and methods for manipulating the layout and presentation of elements. The HTMLCanvasElement interface also inherits the properties and methods of the HTMLElement interface.

CanvasRenderingContext2D：The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a element. It is used for drawing shapes, text, images, and other objects.

可选链操作符

context.value?.stroke()

?.是可选链操作符，它用于检查context.value是否为非空值。如果context.value不为null或undefined，则调用stroke()方法。

canvas绘制网格

function drawCanvasGrid() {
  const gridSize = 50;

  if (context.value) {
    context.value.fillStyle = "rgba(0, 0, 0, .2)";

    for (let i = 0; i * gridSize < canvas.value?.width! - 40; i++) {
      for (var j = 0; j * gridSize < canvas.value?.height! - 40; j++) {
        if (i > 0 && j > 0) {
          context.value.beginPath();
          context.value.rect(i * gridSize, j * gridSize, 2, 2);
          context.value.fill();
          context.value.closePath();
        }
      }
    }
  }
}

beginPath(): 这个方法用于创建一个新的路径或者子路径。在绘制之前，调用beginPath()可以清除之前定义的路径，以确保开始一个新的路径。
rect(x, y, width, height): 这个方法用于在路径中添加一个矩形子路径。它接受四个参数，分别是矩形左上角的x坐标、y坐标，以及矩形的宽度和高度。调用rect()方法并不会直接绘制矩形，而是将矩形添加到当前的路径中。
fill(): 这个方法用于填充当前路径的内容，使其呈现实心的效果。填充的颜色由fillStyle属性指定。
closePath(): 这个方法用于关闭当前的子路径。它会连接当前路径的起点和终点，形成一个封闭的路径。调用closePath()后，绘制的操作会回到起点，可以开始绘制下一个子路径。

在给定的代码片段中，这几个函数被用于在画布上绘制一个网格。通过循环遍历，每个格子都被绘制成一个大小为2x2的矩形，并使用fill()方法填充矩形的内容。beginPath()和closePath()方法则用于定义每个格子的子路径，以及在绘制完成后关闭路径。

clearRect(x, y, width, height)

在CanvasRenderingContext2D接口中，clearRect(x, y, width, height)方法用于清除指定矩形区域内的像素。它接受四个参数，分别是矩形左上角的x坐标、y坐标，以及矩形的宽度和高度。调用clearRect()方法会将指定矩形区域内的像素设为透明，从而清除该区域的内容。

Pinia订阅

store.$subscribe((_, state) => {
  if (state.shouldClear) {
    clearCanvas();
  }
});

使用$subscribe方法，实时监听状态的变化，当状态发生变化时，执行函数中的语句。