vue3+ts优雅的定义setup中的属性(附用户代码片段)

1.解决Vue3中使用reactive定义的响应式失效

2.统一管理组件数据

3.重置组件setup中的数据

示例：

<template>
  <div class='demo'>
    <div>{{ str }}</div>
    <div><button @click="add">str++</button></div>
    <div><button @click="reset">重置属性</button></div>
  </div>
</template>

<script lang='ts'>
interface demo {
  str: string;
  add: () => void;
  reset: () => void;
}
import { reactive, toRefs, onBeforeMount, onMounted, getCurrentInstance, defineComponent, ComponentInternalInstance, ToRefs } from 'vue';
export default defineComponent({
  name: 'demo',
  props: [],
  setup() {
    const ctx: ComponentInternalInstance | null = getCurrentInstance();
    console.log(ctx);
    console.log('1-开始创建组件-setup');
    onBeforeMount(() => {
      console.log('2.组件挂载页面之前执行----onBeforeMount');
    });
    onMounted(() => {
      console.log('3.-组件挂载到页面之后执行-------onMounted');
    });
    const initState = (): demo => {
      return {
        str: "1",
        add: () => {
          model.str += '-';
        },
        reset: () => {
          resetState();
        }
      };
    };
    let model: demo = reactive(initState());
    let data: ToRefs<demo> = toRefs(model);
    let resetState = (): void => {
      Object.assign(model, initState()); // 将新状态对象的属性分配到现有响应式对象
    };
    return {
      ...data,
      resetState
    };
  }
});
</script>
<style lang='stylus' scoped>
</style>

VsCode用户代码片段如下：

{
  "Print to console": {
      "prefix": "vue3-ts",
      "body": [
          "<template>",
          "  <div class='$TM_FILENAME_BASE'></div>",
          "</template>",
          "",
          "<script lang='ts'>",
          "interface $TM_FILENAME_BASE {",
          "}",
          "import { reactive,toRefs,onBeforeMount,onMounted, getCurrentInstance,defineComponent,ComponentInternalInstance,ToRefs} from 'vue'",

          "export default defineComponent({",
          "   name: '$TM_FILENAME_BASE',",
          "   props: [],",
          "   setup() {",
          "     const ctx:ComponentInternalInstance | null = getCurrentInstance()",
          "     console.log(ctx)",
          "     console.log('1-开始创建组件-setup')",

          "     onBeforeMount(() => {",
          "        console.log('2.组件挂载页面之前执行----onBeforeMount')",
          "     })",
          "     onMounted(() => {",
          "       console.log('3.-组件挂载到页面之后执行-------onMounted')",
          "     })",
          "     const initState = (): $TM_FILENAME_BASE => {",
          "       return {",
          "       };",
          "     };",
          "     const model:$TM_FILENAME_BASE = reactive(initState());",
          "     let data: ToRefs<$TM_FILENAME_BASE> = toRefs(model);",
          "     let resetState = (): void => {",
          "      Object.assign(model, initState()); // 将新状态对象的属性分配到现有响应式对象",
          "     }",
          "     return {",
          "       ...data,",
          "       resetState",
          "      }",
          "   }",
          "})",
          "</script>",
          "<style lang='stylus' scoped>",
          "</style>",
  ],
      "description": "Log output to console"
  }
}