Vue3之九层试炼塔

前言

Vue.js作为前端流行的框架，Vue3中带来了许多新的特性和改进，真正理解掌握Vue3并不是一个简单的事情，为了帮助开发者更好的理解和如何应用，特意写了这个文章，深入探究Vue3的APi如何应用。

第一层：鬼门入口

请验证 Button 组件的 Prop 类型 ，使它只接收: primary | ghost | dashed | link | text | default ，且默认值为 default。

<script setup>
defineProps({
  type: {},
});
</script>

<template>
  <button>Button</button>
</template>

第二层：幽灵长廊

请创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值首字母转为大写。

<script setup></script>

<template>
  <input type="text" v-model.capitalize="" />
</template>

第三层：尸骨迷宫

请创建一个可写的计算属性。

<script setup lang="ts">
import { ref, computed } from "vue";

const count = ref(1);
const plusOne = computed(() => count.value + 1);

/**
 * 确保 `plusOne` 可以被写入。
 * 最终我们得到的结果应该是 `plusOne` 等于 3 和 `count` 等于 2。
 */

plusOne.value++;
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ plusOne }}</p>
  </div>
</template>

第四层：邪灵祭坛

请使用 响应式 API: watch 来完成它。

<script setup lang="ts">
import { ref, watch } from "vue";

const count = ref(0);

/**
 * 挑战 1: Watch 一次
 * 确保副作用函数只执行一次
 */
watch(count, () => {
  console.log("Only triggered once");
});

count.value = 1;
setTimeout(() => (count.value = 2));

/**
 * 挑战 2: Watch 对象
 * 确保副作用函数被正确触发
 */
const state = ref({
  count: 0,
});

watch(state, () => {
  console.log("The state.count updated");
});

state.value.count = 2;

/**
 * 挑战 3: 副作用函数刷新时机
 * 确保正确访问到更新后的`eleRef`值
 */

const eleRef = ref();
const age = ref(2);
watch(age, () => {
  console.log(eleRef.value);
});
age.value = 18;
</script>

<template>
  <div>
    <p>
      {{ count }}
    </p>
    <p ref="eleRef">
      {{ age }}
    </p>
  </div>
</template>

第五层：幻境花园

请使用响应式 API: shallowRef 来完成它。

<script setup lang="ts">
import { shallowRef, watch } from "vue";

const state = shallowRef({ count: 1 });

// 回调没被触发
watch(
  state,
  () => {
    console.log("State.count Updated");
  },
  { deep: true }
);

/**
 * 修改以下代码使watch回调被触发
 *
 */
state.value.count = 2;
</script>

<template>
  <div>
    <p>
      {{ state.count }}
    </p>
  </div>
</template>

第六层：冰封王座

请实现一个切换状态的可组合函数。

<script setup lang="ts">
/**
 * 实现一个切换状态的可组合函数
 * 确保该功能正常工作
 */
function useToggle() {}

const [state, toggle] = useToggle(false);
</script>

<template>
  <p>State: {{ state ? "ON" : "OFF" }}</p>
  <p @click="toggle">Toggle state</p>
</template>

第七层：龙脉之心

请实现一个防抖点击指令。

<script setup lang="ts">
/**
 * 实现以下自定义指令
 * 确保在一定时间内当快速点击按钮多次时只触发一次点击事件
 * 你需要支持防抖延迟时间选项, 用法如 `v-debounce-click:ms`
 */

const VDebounceClick = {};

function onClick() {
  console.log("Only triggered once when clicked many times quicky");
}
</script>

<template>
  <button v-debounce-click:200="onClick">Click on it many times quickly</button>
</template>

第八层：神秘宝库

请使用响应式 API: effectScope 来完成它。

<script setup lang="ts">
import { ref, computed, watch, watchEffect } from "vue";

const counter = ref(1);
const doubled = computed(() => counter.value * 2);

// 使用 `effectScope` API 使这些Effect效果在触发一次后停止

watch(doubled, () => console.log(doubled.value));
watchEffect(() => console.log("Count: ", doubled.value));

counter.value = 2;

setTimeout(() => {
  counter.value = 4;
});
</script>

<template>
  <div>
    <p>
      {{ doubled }}
    </p>
  </div>
</template>

第九层：妖塔之巅

请实现一个树组件。

<script setup lang="ts">
interface TreeData {
  key: string;
  title: string;
  children: TreeData[];
}
defineProps<{ data: TreeData[] }>();
</script>

<template>
  <!-- do something.... -->
</template>

揭秘

恭喜各位探险者，如果能顺利闯过九关，想必肯定是资深的冒险家。九层妖塔的揭秘敬请期待，也欢迎大家评论留言，给出不一样的闯关思路。

子曰：“三人行，必有我师焉。择其善者而从之，其不善者而改之。”——《述而》