{"id":15566964,"url":"https://github.com/keno-lee/vue-tiny-virtual-list","last_synced_at":"2025-05-15T23:06:38.774Z","repository":{"id":203491521,"uuid":"708675812","full_name":"kolarorz/vue-virt-list","owner":"kolarorz","description":"【持续更新中】⚡️ 一个支持vue2\u0026vue3的高性能虚拟(滚动)列表组件 👉🏻 轻量5KB 百万数据渲染 满帧率滚动 丰富场景支持  📑 [vue虚拟列表] [vue虚拟滚动列表][vue虚拟树] [vue-virtual-list] [vue-virtual-scroll-list] [vue-virtual-scroller] [vue-virt-tree] ","archived":false,"fork":false,"pushed_at":"2025-05-09T02:54:58.000Z","size":161265,"stargazers_count":351,"open_issues_count":11,"forks_count":40,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-15T12:05:56.107Z","etag":null,"topics":["virt-list","virtual-list","virtual-scroll-list","virtual-scroller","virtualized-list","vue-virt-tree","vue-virtual-list","vue-virtual-tree","vue2","vue3"],"latest_commit_sha":null,"homepage":"https://kolarorz.github.io/vue-virt-list/","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/kolarorz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-10-23T06:51:08.000Z","updated_at":"2025-05-15T09:25:40.000Z","dependencies_parsed_at":"2023-12-04T11:28:43.773Z","dependency_job_id":"9d79a5e0-1e2d-4e61-9d64-f80d62b37f89","html_url":"https://github.com/kolarorz/vue-virt-list","commit_stats":{"total_commits":69,"total_committers":4,"mean_commits":17.25,"dds":"0.10144927536231885","last_synced_commit":"ddbc4af1494bb213eec4de67b218e204540cca37"},"previous_names":["keno-lee/virtual-list-vue","keno-lee/virtual-list","keno-lee/vue-tiny-virtual-list","keno-lee/virtual-render-list","kolarorz/vue-virt-list"],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolarorz%2Fvue-virt-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolarorz%2Fvue-virt-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolarorz%2Fvue-virt-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolarorz%2Fvue-virt-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kolarorz","download_url":"https://codeload.github.com/kolarorz/vue-virt-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254436944,"owners_count":22070946,"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","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":["virt-list","virtual-list","virtual-scroll-list","virtual-scroller","virtualized-list","vue-virt-tree","vue-virtual-list","vue-virtual-tree","vue2","vue3"],"created_at":"2024-10-02T17:09:10.534Z","updated_at":"2025-05-15T23:06:33.696Z","avatar_url":"https://github.com/kolarorz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-virt-list 虚拟列表 虚拟滚动列表 虚拟树\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://img.picgo.net/2024/10/18/banner0cf18d1d1663f5d2.png\" width=\"600\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmcharts.com/compare/vue-virt-list?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vue-virt-list.svg?sanitize=true\" alt=\"Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-virt-list\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-virt-list.svg?sanitize=true\" alt=\"Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-virt-list\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vue-virt-list.svg?sanitize=true\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- \u003ca href=\"./README.md\" target=\"_blank\"\u003eEN\u003c/a\u003e | \u003ca href=\"./README_cn.md\" target=\"_blank\"\u003e中文\u003c/a\u003e --\u003e\n\n## Documentation\n\nTo check out docs, visit \u003ca href=\"https://kolarorz.github.io/vue-virt-list/\" target=\"_blank\"\u003evue-virt-list\u003c/a\u003e\n\n👉 \u003ca href=\"https://d8diegi800.feishu.cn/wiki/MX2Vwn1RWiwUsokjhshcr6sVnNb?from=from_copylink\" target=\"_blank\"\u003eAdvantages\u003c/a\u003e\n\n## Quick Start\n\n```shell\nnpm install vue-virt-list -S\n```\n\n### Options API\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv style=\"width: 500px; height: 400px\"\u003e\n    \u003cVirtList itemKey=\"id\" :list=\"list\" :minSize=\"20\"\u003e\n      \u003ctemplate #default=\"{ itemData, index }\"\u003e\n        \u003cdiv\u003e{{ index }} - {{ itemData.id }} - {{ itemData.text }}\u003c/div\u003e\n      \u003c/template\u003e\n    \u003c/VirtList\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { VirtList } from 'vue-virt-list';\n  export default {\n    components: { VirtList },\n    data() {\n      return {\n        list: [{ id: 0, text: 'text' }],\n      };\n    },\n  };\n\u003c/script\u003e\n```\n\n### Composition API\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv style=\"width: 500px; height: 400px\"\u003e\n    \u003cVirtList itemKey=\"id\" :list=\"list\" :minSize=\"20\"\u003e\n      \u003ctemplate #default=\"{ itemData, index }\"\u003e\n        \u003cdiv\u003e{{ index }} - {{ itemData.id }} - {{ itemData.text }}\u003c/div\u003e\n      \u003c/template\u003e\n    \u003c/VirtList\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  import { ref, shallowRef } from 'vue';\n  import { VirtList } from 'vue-virt-list';\n  const list = ref([{ id: 0, text: 'text' }]);\n\n  // 大数据建议使用 shallowRef: https://kolarorz.github.io/vue-virt-list/guide/instructions#shallowref\n  // const list = shallowRef([{ id: 0, text: 'text' }])\n\u003c/script\u003e\n```\n\n## WeChat\n\n有问题可扫码加好友进入技术交流群（备注github账号名\u0026vue-virt-list）\n\n\u003cimg src=\"https://cdn.jsdelivr.net/gh/kolarorz/images@master/wechat.jpg\" width=200 /\u003e\n\n## Sponsor\n\n开源不易，如果帮助到你，请作者喝杯咖啡吧~\n\n\u003cimg src=\"https://cdn.jsdelivr.net/gh/kolarorz/images@master/wechatpay.jpg\" width=200 /\u003e\n\n\u003cimg src=\"https://cdn.jsdelivr.net/gh/kolarorz/images@master/alipay.jpg\" width=200 /\u003e\n\n### 感谢您的慷慨\n\n- AliPay\n\n  - \\*\\*丹\n  - \\*\\*平\n  - \\*\\*理\n\n- WechatPay\n\n  - 甜言蜜语说给左耳听\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeno-lee%2Fvue-tiny-virtual-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeno-lee%2Fvue-tiny-virtual-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeno-lee%2Fvue-tiny-virtual-list/lists"}