vue3

本人看文档的时候喜欢自己敲一遍，本文仅作为个人笔记，大部分出处来源于vue3官方文档

响应式基础

声明响应式状态

用reactive()函数创建一个响应式对象或数组：

import { reactive } from "vue";

const state = reactive({ count: 0 });

响应式对象是JavaScript Proxy，不同之处在于vue能够跟踪响应式对象property的访问与更改操作。

<script setup>

使用单文件组件（SFC）时，可以用 <script setup> 来简化大量样板代码。

DOM 更新时机

更改响应式状态后，DOM 会自动更新。DOM 的更新不是同步的，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论进行了多少次声明更改，每个组件都只需要更新一次。

若要等待一个状态改变后的 DOM 更新完成，你可以使用 nextTick() 这个全局 API：

<template>
  <div>
    <button @click="increment">{{ state.count }}</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, nextTick } from "vue";
const state = reactive({ count: 0 });

function increment() {
  state.count++;
  nextTick(() => {
    // 访问更新后的dom
  });
}
</script>

深层响应性

在 Vue 中，状态默认是深层响应式的。更改深层次的对象或数组，改动也能被检测到。

import { reactive } from "vue";
const obj = reactive({
  nested: {
    count: 0,
  },
  arr: ["foo", "bar"],
});
function mutateDeeply() {
  // 以下都会按照期望工作
  obj.nested.count++;
  obj.arr.push("baz");
}

你也可以直接创建一个shallowReactive()浅层响应式对象。它们仅在顶层具有响应性，一般仅在某些特殊场景中需要。