围绕Vue 3 Composition API构建一个应用程序，包含一些优秀实践！

//  选项API风格
data: () => ({
    refA: 1,
    refB: 2,
  }),
// 在这里，我们经常看到500行的代码。
computed: {
  computedA() {
    return this.refA + 10;
  },
  computedB() {
    return this.refA + 10;
  },
},

setup() {
    const refA = ref(1);
  const computedA = computed(() => refA.value + 10);
  /* 
  这里也可能是500行的代码。
     但是，这些功能可以保持在彼此附近!
  */
    const computedB = computed(() => refA.value + 10);
  const refB = ref(2);

    return {
      refA,
      refB,
      computedA,
      computedB,
    };
  },

<script setup>
import { ref, computed } from 'vue'
const refA = ref(1);
const computedA = computed(() => refA.value + 10);
const refB = ref(2);
const computedB = computed(() => refA.value + 10);
</script>

// Component.vue
<script setup>
import useFeatureA from "./featureA";
import useFeatureB from "./featureB";
const { refA, computedA } = useFeatureA();
const { refB, computedB } = useFeatureB();
</script>
// featureA.js 
import { ref, computed } from "vue";

export default function () {
  const refA = ref(1);
  const computedA = computed(() => refA.value + 10);
  return {
    refA,
    computedA,
  };
}
// featureB.js 
import { ref, computed } from "vue";
export default function () {
  const refB = ref(2);
  const computedB = computed(() => refB.value + 10);
  return {
    refB,
    computedB,
  };
}

// Component.vue
<script setup>
import { useStore } from 'vuex';
const store = useStore();
store.dispatch('myAction');
</script>
// store/actions.js
import { onMounted } from 'vue'
// ...
actions: {
  myAction() {
    onMounted(() => {
   console.log('its crazy, but this onMounted will be registered!')
  })
  }
}
// ...

<script setup lang="ts">
import { ref, onUpdated } from "vue";
// 这个钩子将被注册。我们在 setup 中正常调用它
onUpdated(() => {
  console.log('✅')
});
class Foo {
  constructor() {
    this.registerOnMounted();
  }
  registerOnMounted() {
     //它也会注册! 它是在一个类方法中，但它是在 
     //在 setup 中同步执行
    onUpdated(() => { 
      console.log('✅')
    });
  }
}
new Foo();
// IIFE also works
(function () {
  onUpdated(() => {
    state.value += "✅";
  });
})();
const onClick = () => {
 /* 
 这不会被注册。这个钩子是在另一个函数里面。
 Vue不可能在setup 初始化中达到这个方法。
 最糟糕的是，你甚至不会得到一个警告，除非这个 
 函数被执行! 所以要注意这一点。
 */ 
  onUpdated(() => {
    console.log('❌')
  });
};

// 异步IIFE也会不行 :(
(async function () {
  await Promise.resolve();
  onUpdated(() => {
    state.value += "❌";
  });
})();
</script>

<script setup lang="ts">
import { myAsyncFunction } from './myAsyncFunction.js
const data = await myAsyncFunction();
</script>
<template>
  Async data: {{ data }}
</template>

<script setup>
import { ref } from "vue";
import { myAsyncFunction } from './myAsyncFunction.js
const data = ref(null);
myAsyncFunction().then((res) =>
  data.value = fetchedData
);
</script>
<template>
  Async data: {{ data }}
</template>

<script setup>
import { ref } from "vue";
import { myAsyncFunction } from './myAsyncFunction.js'

const data = ref(null);
(async function () {
    data.value = await myAsyncFunction()
})();
</script>
<template>
  Async data: {{ data }}
</template>

// Parent.vue
<script setup lang="ts">
import { Child } from './Child.vue
</script>
<template>
  <Suspense>
  <Child />
 </Suspense>
</template>
// Child.vue
<script setup lang="ts">
import { myAsyncFunction } from './myAsyncFunction.js
const data = await myAsyncFunction();
</script>
<template>
  Async data: {{ data }}
</template>

<script setup lang="ts">
import {
  useStorage,
 useDark
} from "@vueuse/core";
import { ref } from "vue";

/* 
    一个实现localStorage的例子。 
 这个函数返回一个Ref，所以可以立即用`.value`语法来编辑它。
 用.value语法编辑，而不需要单独的getItem/setItem方法。
*/
const localStorageData = useStorage("foo", undefined);
</script>

<script setup>
import { useAsyncState } from "@vueuse/core";
import { myAsyncFunction } from './myAsyncFunction.js';
const { state, isReady } = useAsyncState(
 // the async function we want to execute
  myAsyncFunction,
  // Default state:
  "Loading...",
  // UseAsyncState options:
  {
    onError: (e) => {
      console.error("Error!", e);
      state.value = "fallback";
    },
  }
);
</script>
<template>
  useAsyncState: {{ state }}
  Is the data ready: {{ isReady }}
</template>

<script setup lang="ts">
import { PropType } from "vue";
interface CustomPropType {
  bar: string;
  baz: number;
}
//  defineProps的重载。
// 1. 类似于选项API的语法
defineProps({
  foo: {
    type: Object as PropType<CustomPropType>,
    required: false,
    default: () => ({
      bar: "",
      baz: 0,
    }),
  },
});

// 2. 通过一个泛型。注意，不需要PropType!
defineProps<{ foo: CustomPropType }>();

// 3.默认状态可以这样做。
withDefaults(
  defineProps<{
    foo: CustomPropType;
  }>(),
  {
    foo: () => ({
      bar: "",
      baz: 0,
    }),
  }
);
// // Emits也可以用defineEmits进行简单的类型化
defineEmits<{ (foo: "foo"): string }>();
</script>

import { ref, Ref, SetupContext, watch } from "vue";
export default function ({
  emit,
}: SetupContext<("change-component" | "close")[]>): 
// 下面的代码真的有必要吗？
{
  onCloseStructureDetails: () => void;
  showTimeSlots: Ref<boolean>;
  showStructureDetails: Ref<boolean>;
  onSelectSlot: (arg1: onSelectSlotArgs) => void;
  onBackButtonClick: () => void;
  showMobileStepsLayout: Ref<boolean>;
  authStepsComponent: Ref<string>;
  isMobile: Ref<boolean>;
  selectedTimeSlot: Ref<null | TimeSlot>;
  showQuestionarireLink: Ref<boolean>;
} {
  const isMobile = useBreakpoints().smaller("md");
  const store = useStore();
 // and so on, and so on
 // ... 
}

import { ref, Ref, SetupContext, watch } from "vue";

export default function ({
  emit,
}: SetupContext<("change-component" | "close")[]>) {
  const isMobile = useBreakpoints().smaller("md");
  const store = useStore();
 // The return can be typed implicitly in composables
}