\n[](https://www.npmjs.com/package/vue-class-setup)\n[](https://www.npmjs.com/package/vue-class-setup)\n[](https://www.npmjs.com/package/vue-class-setup)\n\n## Why?\n\nUsing class can help you avoid `ref`, `reactive` , `computed` and `withDefaults`, and significantly reduce your mental burden and better organize your code. It supports vue2 and vue3 at the same time. After gzip compression, it is only 1KB\n\n## vue-class-component vs vue-class-setup\n\n**We should deprecate [vue-class-component](https://github.com/vuejs/vue-class-component/issues/569), and use class in setup**\n| List | vue-class-component | vue-class-setup |\n| --- | --- | ----------- |\n| Vue2 | ✅ | ✅ |\n| Vue3 | ❌ | ✅ |\n| Method bind this | ✅ | ✅ |\n| Props type check | ❌ | ✅ |\n| Emit type check | ❌ | ✅ |\n| Watch type check | ❌ | ✅ |\n| Multiple class instances | ❌ | ✅ |\n| Class attribute sets the default value of the prop | ❌ | ✅ |\n\n## Install\n\n```bash\nnpm install vue-class-setup\n# or\nyarn add vue-class-setup\n```\n\n## Quick start\n\n\n\n```vue\n\n\n {{ text }}
\n \n{{ left.text }}
\n{{ right.text }}
\n\n```\n\n\n\n### PassOnTo\n\nThis `callback` will be called back after the `Test class` instantiation is completed, and the decorated function will be passed in, and the TS can check whether the type is correct\n\n```ts\n@Setup\nclass App extends Define {\n @PassOnTo(myFunc)\n public init(name: string) {}\n}\n\nfunction myFunc(callback: (name: string) => void) {\n // ...\n}\n```\n\nIf `PassOnTo` does not pass in a handler, it is called after `reactive` and `computed` execution are completed, You should avoid watching in the `constructor` because it may not have `reactive`\n\n```ts\nimport { Watch } from 'vue';\n\n@Setup\nclass App extends Define {\n public value = 0;\n @PassOnTo()\n private setup() {\n // You can safely watch, but it is recommended to use the Watch decorator\n watch(\n () => this.value,\n (value) => {\n // ...\n }\n );\n }\n}\n```\n\n### Watch\n\nIt can correctly identify the type\n\n\n\n```vue\n\n\n\n{{ app.value }}
\n{{ app.immediateValue }}
\n \n\n```\n\n\n\n## Get the injection object in setup\n\nUseful when `defineExpose`\n\n\n\n```vue\n\n\n\n{{ text }}
\n{{ app.text === text }}
\n \n