{"id":26422591,"url":"https://github.com/yanyunwu/vact","last_synced_at":"2026-03-12T14:37:33.655Z","repository":{"id":45709881,"uuid":"513868271","full_name":"yanyunwu/vact","owner":"yanyunwu","description":"一个简单的前端响应式框架","archived":false,"fork":false,"pushed_at":"2023-03-23T06:10:30.000Z","size":3947,"stargazers_count":45,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-23T09:44:05.453Z","etag":null,"topics":["javascript","jsx","vact"],"latest_commit_sha":null,"homepage":"https://github.com/yanyunwu/vact/blob/master/docs/README.md","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yanyunwu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-14T11:08:19.000Z","updated_at":"2024-12-26T04:06:26.000Z","dependencies_parsed_at":"2022-07-25T02:34:44.197Z","dependency_job_id":null,"html_url":"https://github.com/yanyunwu/vact","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/yanyunwu/vact","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanyunwu%2Fvact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanyunwu%2Fvact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanyunwu%2Fvact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanyunwu%2Fvact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yanyunwu","download_url":"https://codeload.github.com/yanyunwu/vact/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanyunwu%2Fvact/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272873216,"owners_count":25007489,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","jsx","vact"],"created_at":"2025-03-18T02:26:02.393Z","updated_at":"2026-03-12T14:37:28.587Z","avatar_url":"https://github.com/yanyunwu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vact\n\n借鉴加创新的前端响应式框架\n\n[![OSCS Status](https://www.oscs1024.com/platform/badge/yanyunwu/vact.svg?size=small)](https://www.oscs1024.com/project/yanyunwu/vact?ref=badge_small)\n\n\n\n## 使用文档\n\n[点击查看vact使用文档](./docs/README.md)\n\n[备用文档链接](https://github.com/yanyunwu/vact/blob/master/docs/README.md)\n\n\n\n\n## 说点什么？\n\n首先介绍一下自己，我不是什么大佬，只是有时候会对于一些东西感兴趣，所以才写了这个东西。它可能没有什么特点，而且更是比不过现在已经非常成熟的vue和react，这点我当然是知道的，而且我还是借鉴和使用了它们的一些思想，但假如说有那么一些创新，或者是有趣的东西，那便足够了，不是吗？我只希望能得到大家的建议，并从中学习进步，就足够了。\n\n\n\n## 代码示例\n\n```jsx\nimport { createApp, state } from 'vactapp'\n\nconst $data = {\n  count: 0,\n  color: 'red'\n}\n\nlet show = state(true)\n\nconst head = \u003c\u003e\n  \u003ch1 style={{ color: $data.color }}\u003ehello world!\u003c/h1\u003e\n  \u003cdiv onClick={() =\u003e $data.color = 'blue'}\u003e\u003cbutton\u003e改变颜色\u003c/button\u003e\u003c/div\u003e\n\u003c/\u003e\n\nconst bottom = \u003c\u003e\n  \u003cspan\u003e底部显示\u003c/span\u003e\n\u003c/\u003e\n\nconst app = \u003cdiv id='app'\u003e\n  {head}\n  \u003cdiv\u003e\n    \u003cspan\u003e计数器\u003c/span\u003e\n    \u003cbutton onClick={() =\u003e $data.count++}\u003e增加\u003c/button\u003e\n    {$data.count}\n    \u003cbutton onClick={() =\u003e $data.count--}\u003e减少\u003c/button\u003e\n  \u003c/div\u003e\n  {show.value \u0026\u0026 bottom}\n  \u003cdiv\u003e\u003cbutton onClick={() =\u003e show.value = !show.value}\u003e切换显示\u003c/button\u003e\u003c/div\u003e\n\u003c/div\u003e\n\ncreateApp(app).mount('#app')\n```\n\n\n\n## 响应式\n\n通过`defineState`和`state`定义响应式对象\n\n```jsx\nimport { defineState, state, createApp } from 'vactapp'\n\nconst data = defineState({\n  text: 'hello'\n})\n\nconst text = state('world!')\n\nconst app = \u003c\u003e\u003cspan\u003e{data.text}\u003c/span\u003e \u003cspan\u003e{text.value}\u003c/span\u003e\u003c/\u003e\n\ncreateApp(\u003cdiv\u003e{app}\u003c/div\u003e).mount('#app')\n```\n\n\n\n### babel解析响应式对象\n\n你可能会好奇为什么第一个例子的$data对象只是单纯的一个对象\n\n事实上，在我写的babel插件中会自动把以$开头的且内容为对象的变量转义为`defineState`\n\n```js\nconst $data = {\n  count: 0,\n  color: 'red'\n}\n// 等同于\nconst $data = defineState({\n  count: 0,\n  color: 'red'\n})\n```\n\n\n\n***以上只是简单的示例，详细使用请务必查看文档***","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyanyunwu%2Fvact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyanyunwu%2Fvact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyanyunwu%2Fvact/lists"}