vue3 ​

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.mount("#app");

/**
 * 声明数据
 * - ref: 接受数据并返回响应式代理, 返回值通过 .value 访问, 若值为对象, 则会经过 reactive 处理
 * - reactive: 接受对象并返回响应式代理, 访问时与原对象无异, 但使用解构后的值是没有响应式的
 * - readonly: 与 reactive 相同, 但对象内容是只读的
 * - computed: 接受有返回值的函数或 { get(), set() } 对象, 并返回响应式代理, 返回值通过 .value 访问
 * shallowRef(val)、shallowReactive(obj)、shallowReadonly(obj): 为对应的浅层代理
 */
import { ref, reactive, readonly, computed } from "vue";
import { shallowRef, shallowReactive, shallowReadonly } from "vue";
const a = ref(1);
a.value++;
a.value; // 2
const b = ref({ b: "b" });
b.value.b; // 'b'
const c = reactive({ c: "" });
c.c = "c";
c.c; // 'c'
const d = readonly({ d: "d" });
const e = computed(() => c.c + d.d);
const f = computed({
  set: val => {},
  get: () => c.c + d.d,
});
// reactive 除了 Object 还支持 Array, Set, Map, 对于 Map 若需要修改其值建议结合 ref 使用
const g = reactive(
  new Map([
    ["demo1", ref("some")],
    ["demo2", ref("other")],
  ])
);

/**
 * 监听数据
 * - watch: 接一或多个数据, 当数据变动时触发回调
 * - watchEffect：接受一个函数, 其内部响应式数据变动时触发回调, 该函数在创建时会执行一次, 并返回一个停止监听的函数
 */
import { ref, watch, watchEffect } from "vue";

const first = ref("");
const second = ref("");
const state = ref(true);
// 返回值是一个函数, 调用后移除监听
const stopEffect = watchEffect(() => {
  first.value;
  second.value;
  console.log("响应式数据变动时执行");
});
// 针对数据进行监听
watch(state, (state, preState) => {
  if (!state.value) stopEffect(); // 移除上述 watchEffect 监听
});
const obj = reactive({ key: "val" });
const noop = () => {}; // 占位
watch(() => obj.key, noop); // 针对某个属性监听
watch([first, second], ([first, second], [prevFirst, prevSecond]) => {}); // 多个数据

/**
 * watchEffect 还支持第二个可选项
 * - flush: 为触发时机
 *  - 'pre': 默认状态, 在组件渲染之前执行, 若 watchEffect 中有多个变动的响应式对象, 在一次同步流程中只触发一次回调
 *  - 'post': 与 'pre' 对应，在组件渲染之后执行, 别名函数 watchPostEffect
 *  - 'sync': 若 watchEffect 中有多个变动的响应式对象, 每变动一次都会触发一次回调, 别名函数 watchSyncEffect
 */
interface WatchEffectOptions {
  flush?: "pre" | "post" | "sync"; // 默认：'pre'
  onTrack?: (event: DebuggerEvent) => void;
  onTrigger?: (event: DebuggerEvent) => void;
}

/**
 * watch 也支持第二个可选项
 * - immediate: 是否立即执行一次, 默认不执行, 与 watchEffect 不同的是 watchEffect 必须立即执行一次
 * - flush: 与 watchEffect 相同; 但 watch 一般较少监听多个数据, 通常不需要调整该策略
 * - deep: 是否深度监听
 */
interface WatchOptions extends WatchEffectOptions {
  immediate?: boolean; // 默认：false
  deep?: boolean; // 默认：false
  flush?: "pre" | "post" | "sync"; // 默认：'pre'
  onTrack?: (event: DebuggerEvent) => void;
  onTrigger?: (event: DebuggerEvent) => void;
}

/**
 * 工具函数
 */
const str = ref("str");
const obj = reactive({ obj: true });
const oly = readonly({ changed: false });

isRef(str); // true  判断是否为 ref 或 shallowRef 创建的对象
isReactive(obj); // true 判断是否为 reactive 或 shallowReactive 创建的对象
isReadonly(oly); // true 判断是否为 readonly 或 shallowReadonly 创建的对象
isProxy(str); // false 判断是否为 reactive、readonly、shallowReactive、shallowReadonly 创建的对象
isProxy(oly); // true

unref(str); // 'str'  等价于 `val = isRef(val) ? val.value : va`
// 返回 reactive、shallowReactive、readonly、shallowReadonly 的原始对象(代理对象属性修改也会修改原始对象)
toRaw(obj); // { obj: true }
toRaw(oly); // { changed: false }

markRaw(val); // 将数据标记为不可被转换为代理的, 谨慎使用
toRef(val); // 与 ref(val) 类似, 对于函数会创建只读的 ref
toRef(obj, key); // 将对象的属性转为响应式
toRefs(obj); // 将对象的全部属性转为响应式

triggerRef(shallowRefObj); // 强制触发一个 shallowRef 的副作用

/**
 * defineProps 用于描述 props
 * - 可以通过返回值直接访问 props
 * - 支持 运行时声明 和 类型声明 两种形式, 注意 只能择其一
 */
// 运行时声明: 使用 选项式 props 中的规则
const props = defineProps({
  single: {
    type: String,
    default: "demo",
  },
  multi: [String, Boolean],
});

// 类型声明: 使用 ts 规则
interface Props {
  single: stirng;
  multi: string | boolean;
}
const props = withDefaults(defineProps<Props>(), {
  single: "demo",
});

/**
 * defineEmits 用于描述 emits
 * - 其定义相当于描述 emits 属性
 * - 其返回值相当于 $emit, 用于派发事件
 * - 支持 运行时声明 和 类型声明 两种形式, 注意 只能择其一
 */
// 运行时声明: 使用 选项式 emits 中的规则
const emits = defineEmits(["someEvent", "otherEvent"]);
const emits = defineEmits({
  someEvent: null, // 没有验证函数
  otherEvent: payload => isValid(payload),
});

// 类型声明: 使用 ts 规则
interface Emits {
  (ev: "someEvent"): void;
  (ev: "otherEvent", payload: any): void;
}
interface Emits {
  someEvent: []; // 具名元组语法 v3.3+ 新增
  otherEvent: [payload: any];
}
const emits = defineEmits<Emits>();

// 派发事件
emits("otherEvent", "demo");

/**
 * defineSlots 只接受类型参数, 相较于 useSlots() 增加了类型检查
 * - v3.3+ 新增
 * - 返回值与 useSlots() 或 setup() 上下文中的 slots 相同
 */
interface Slots {
  default(props: { someAttr: string }): any;
}
const slots = defineSlots<Slots>();

/**
 * 部分组件选项无法在 <script setup> 中直接声明, 如 `name`
 * defineOptions 用于声明组件选项, v3.3 新增
 */
defineOptions({
  name: "demo",
  inheritAttrs: false,
});

// defineExpose 用于暴露组件属性, 默认是不暴露 `<script setup>` 中的声明
const some = "some";
const other = ref();
defineExpose({ some, other });