Vue 3.0 顺手的写法

Vue 3.0 提升了对TypeScript的支持，伴随着组合式API的推出，tsx的使用变得顺理成章。

• 保留App.vue
  在此文件中可以一如往常引入预处理样式文件

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld
    msg="Welcome to Your Vue.js + TypeScript App"
    other="other"
    :sub="{ msg: 'sub' }"
  >
    <template #default="{ args }">
      <h1>Main slot {{ args }}</h1>
    </template>
    <template #sub="{ args, count }">
      <h1>Sub {{ args }} {{ count }}</h1>
    </template>
  </HelloWorld>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld";

export default defineComponent({
  components: {
    HelloWorld
  }
});
</script>

<style lang="less"></style>

• HellowWorld文件更换为tsx

import { computed, defineComponent, reactive } from "vue";


const PrivateComponent = defineComponent({
  setup(props, { attrs }) {
    return () => {
      const sub = attrs.sub as { msg: string };
      return (
        <>
          { sub && sub.msg ? <p>{sub.msg}</p> : <h1>noting</h1>}
        </>)
    }
  }
});

export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      formData: {
        input: ""
      }
    }
  },
  setup(props, ctx) {
    const { attrs, slots, emit } = ctx;
    /* data */
    const state = reactive({ count: 1, msg: "state" });
    /* computed */
    const doubleCount = computed(() => state.count * 2);  /* methods */
    /* methods */
    const handleClick = () => state.count++;

    /* render */
    return () => {
      const
        Main = slots.default as any,
        Sub = slots.sub as any,
        pContent = `click count: ${state.count} computed: ${doubleCount.value}`,
        mainArgs = { msg: `main's value`, count: state.count };

      return (
        <>
          <h1>Vue 3.0 with JSX</h1>
          <input v-model={state.count} type="number" />
          <Main args={mainArgs} />
          <Sub args={`sub's value`} count={state.count} />
          <button onClick={handleClick}>click</button>
          <p>{props.msg}</p>
          <p>{pContent}</p>
          <PrivateComponent {...attrs} />
        </>
      );
    };
  }
});

• state作为数据分组使用，既符合内聚，也避免ref=>value 语法的争议。
• slot 动态修改更加灵活，slotScope使用也很自然。
• 相比于React的onChange，v-model指令的保留是真的舒服，更加清爽。
  • 问题来了，computed的get与set方法是如何在setup中实现？我直接用Object.defineProperty?那又如何保证自动响应？
  • 唉，我悔过computed
    image.png