{"id":16434746,"url":"https://github.com/zce/vuejs-3-examples","last_synced_at":"2025-03-21T04:33:03.536Z","repository":{"id":49990667,"uuid":"257154555","full_name":"zce/vuejs-3-examples","owner":"zce","description":"Some examples of Vue.js 3.0.","archived":false,"fork":false,"pushed_at":"2023-11-25T09:34:07.000Z","size":414,"stargazers_count":28,"open_issues_count":21,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-12T08:49:59.917Z","etag":null,"topics":["composition-apis","vite","vue","vue3","vue3-demo","vuejs","vuejs3"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zce.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-04-20T02:48:48.000Z","updated_at":"2024-02-12T01:31:41.000Z","dependencies_parsed_at":"2023-10-23T08:26:56.916Z","dependency_job_id":"5b8b23a5-8fe7-4f73-a22b-549f0dc98baf","html_url":"https://github.com/zce/vuejs-3-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zce%2Fvuejs-3-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zce%2Fvuejs-3-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zce%2Fvuejs-3-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zce%2Fvuejs-3-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zce","download_url":"https://codeload.github.com/zce/vuejs-3-examples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221811542,"owners_count":16884363,"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":["composition-apis","vite","vue","vue3","vue3-demo","vuejs","vuejs3"],"created_at":"2024-10-11T08:50:00.482Z","updated_at":"2024-10-28T09:25:33.024Z","avatar_url":"https://github.com/zce.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue.js 3.0 tutorials\n\n为什么学习 Vue.js 3.0？\n\n作为前端的主力框架，Vue.js 因为上手成本低的特点，有着很大的市场占有率，很多的公司都在大面积使用 Vue.js 作为主要的技术栈，再往后升级 Vue.js 3.0 只是早晚的事情，而且 Vue.js 3.0 确实有很多突破性的改进（具体的改进和变化我们待会也会详细介绍），所以对于我们前端开发者而言，掌握 Vue.js 3.0 也是一个必要的目标。\n\nVue.js 3.0 已经发布有一段时间了，而且在此之前也经历过一个很长的测试阶段，所以对于 Vue.js 3.0 我相信大多数「圈内人士」都或多或少的了解了一些。例如：新的 Composition APIs、响应式数据底层实现改由 Proxy 实现、重写了 Virtual DOM、性能上的变化等等。\n\n具体我们开发者能够感知到的变化，我们可以从官方文档中找到一个非常完整详细的[介绍](https://v3.vuejs.org/guide/migration/introduction.html#notable-new-features)，其中绝大多数的变化在我们之前的课程中我也有过详细的介绍。\n\n今天晚上我并不打算一个一个地跟你去过一遍这些新的特性，我是希望能够更多的跟你分享一些我的理解和观点，因为对于已经入行的同学来说，很多时候被困扰的并不用法上的问题，而是设计和原理上的疑惑。\n\n具体来说，我把今天的要分享的内容归纳为以下这几个问题：\n\n1. Vue.js 3.0 为什么会推出一套全新的 Composition APIs？这套全新的 API 又有哪些明显的优势？\n2. Composition APIs 究竟应该怎样使用才能发挥出它应有的价值？\n3. Vue.js 3.0 目前在实际场景下的使用情况如何？敢不敢现在升级？\n4. 周边生态目前又是什么样的状态？\n\n如果时间允许的情况下，我会：\n\n1. 剖析一下 Vue.js 3.0 中响应式数据核心的实现原理和源码\n2. 聊一聊 Vue.js 3.0 中的几个实验性的语法糖\n3. 拆解一下 Vue.js 3.0 同期发布的 Vite\n\n不知道这些问题有没有戳中你，如果你也有类似的疑问，一定跟我们一起看下去，彻底搞懂这些问题。\n\n## Composition APIs\n\n### Composition APIs 的起因\n\n话不多说，首先来看第一个话题：Vue.js 3.0 为什么会推出一套全新的 Composition APIs？\n\n想要彻底理解 Vue.js 3.0 为什么搞一套 Composition APIs，核心你得先能够体会到 Vue.js 中存在的一些「小问题」。（因为一套替代方案的核心价值肯定在于它解决了之前的某种问题）。\n\n大家对 Vue.js 3.0 熟不熟我不好确定，但是大家之前应该都或多或少的用过 Vue.js 2.x，在 Vue.js 2.x 中，框架的规则性或者叫规矩感非常强。\n\n可能这么说不好理解，我举个例子，比如我们在一个页面组件中要呈现一些从服务器端获取的数据，我们需要先在组件的 data 中添加一个成员，往模板上暴露数据，然后要到组件的生命周期钩子函数中添加获取数据的逻辑代码，如果取回来的数据在呈现的时候还需要经过过滤筛选，那我们还需要在组件的 computed 属性中添加对应的计算属性。\n\n整个过程看似很和谐，这也是为什么说 Vue.js 上手非常友好的原因，毕竟这个过程中框架提供了很完善的规则，我们只需要照着文档一步一步来就行。\n\n这里我也准备了一个[小案例](01-composition-apis/01-classic/prepare.html)，....\n\n这里我们要去添加筛选界面上所现实的 Todos 列表的功能。\n\n我们需要先 xxx，再 xxx ...\n\n那大家能意识到这样做存在的问题么？\n\n同一个业务功能相关的代码分散在各个位置，框架的规则是按照技术特性划分，而不是按照业务功能划分\n\n### *Options APIs（Classic Usage）\n\nVue.js 3.0 仍然支持 Vue.js 2.x Options APIs 典型用法！\n\n### Composition APIs 的基本用法\n\nVue.js 3.0 全新引入一套新的 API 调用风格，类函数式编程！\n\n### Composition APIs 封装 Hooks\n\n如果只是目前这么去使用 Composition APIs，那只是换汤不换药，没什么意义。。。\n\n单纯的使用 Composition APIs 并没有太明显的优势，Composition APIs 核心的优势在于 Composition（组合）！\n\nhooks 库：https://github.com/u3u/vue-hooks\n\n### 封装后的 Todos 案例\n\n发挥 Composition APIs 的价值\n\n### Composition APIs 的优势总结\n\n- 逻辑组合，更强大的逻辑抽象能力，同时更好的逻辑复用\n- 没有 this，没烦恼，再也不用纠结 this 上到底有什么了\n- 更好的类型推导能力（TypeScript）\n- 更友好的 Tree-shaking 支持（渐进式体验）\n- 更大的代码压缩空间\n\n## Vue.js 3.0 基础设施\n\n### 基于 Webpack 构建\n\n### 基于 Vue CLI 构建\n\n### 基于 Vite 构建\n\n参考： https://github.com/zce/vite-essentials\n\n## 周边库生态\n\n### 官方库\n\n### 社区库\n\n- https://github.com/vuejs/awesome-vue/issues/3544\n\n## ENCORE 加餐\n\n### Reactivity\n\n\n\n### SFC Sugers\n\n- https://github.com/vuejs/rfcs/pull/222\n- https://github.com/vuejs/rfcs/pull/228\n- https://github.com/vuejs/rfcs/pull/227\n\n### Vite 原理与实践\n\n参考： https://github.com/zce/vite-essentials\n\n---\n\n\u003e Some examples of Vue.js 3.0.\n\n- [Composition APIs](01-composition-apis)\n- [Webpack based](02-webpack-based)\n- [Vue CLI based](03-vue-cli-based)\n- [Vite based](04-vite-based)\n- [Official Libraries](05-official-libraries)\n\n\u003e https://github.com/zce/vite-essentials\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzce%2Fvuejs-3-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzce%2Fvuejs-3-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzce%2Fvuejs-3-examples/lists"}