{"id":21479322,"url":"https://github.com/meathill/gitbook-path-to-advanced-vuer","last_synced_at":"2026-04-18T06:35:31.469Z","repository":{"id":44782837,"uuid":"179853145","full_name":"meathill/gitbook-path-to-advanced-vuer","owner":"meathill","description":"My gitbook for how to be a better Vue programmer.","archived":false,"fork":false,"pushed_at":"2023-10-11T12:22:41.000Z","size":1036,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-07T16:35:10.153Z","etag":null,"topics":["gitbook","gitchat","vue","vue-router","vuex","webpack"],"latest_commit_sha":null,"homepage":"https://meathill.com/gitbook-path-to-advanced-vuer/","language":"JavaScript","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/meathill.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-06T15:47:17.000Z","updated_at":"2022-04-28T10:05:35.000Z","dependencies_parsed_at":"2024-11-23T11:25:39.287Z","dependency_job_id":"64d3726f-ebf9-41c4-a199-a57d85134504","html_url":"https://github.com/meathill/gitbook-path-to-advanced-vuer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/meathill/gitbook-path-to-advanced-vuer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-path-to-advanced-vuer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-path-to-advanced-vuer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-path-to-advanced-vuer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-path-to-advanced-vuer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meathill","download_url":"https://codeload.github.com/meathill/gitbook-path-to-advanced-vuer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-path-to-advanced-vuer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31959881,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"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":["gitbook","gitchat","vue","vue-router","vuex","webpack"],"created_at":"2024-11-23T11:24:38.545Z","updated_at":"2026-04-18T06:35:31.449Z","avatar_url":"https://github.com/meathill.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"走出 Vue 新手村\n==============\n\n原本想写得更深一点，可惜有些内容日常开发的时候会遇到，写的时候就忘记了……所以最后成文比想象中浅很多，最后更名。以后慢慢更新吧，说不定有重回“进阶指南”的一天。\n\n这是我发在 GitChat 的文章，如果你觉得对你有帮助，可以前去购买，支持我创作更多更好的文章，\n\n[GitChat 走出 Vue 新手村](https://gitbook.cn/gitchat/activity/5ca6d6d3f8b5922e127e87c4)\n\n或者支付宝扫码领个红包：\n\n![支付宝领红包](https://qiniu.meathill.com/wp-content/uploads/2019/05/%E6%94%AF%E4%BB%98%E5%AE%9D%E7%BA%A2%E5%8C%85-269x300.png)\n\n前言\n========\n\n在众多 MVVM 框架之中，Vue 是后起之秀。但凭借出色的设计、优秀的 API，Vue 后发先至，如果不是 996.ICU 出来搅局，它已经稳坐 GitHub Star 第二把交椅。\n\n大家喜欢 Vue 的原因很多，最重要的一点是：它的学习曲线很平缓。作者开创性地用 `getter/setter` 替换传统的赋值行为，这样一来，虽然写起来还是 `this.a = b;`，但实际上这里的值会立刻被渲染到视图当中，非常神奇，尤如魔法。\n\n然而这样的便利必然有其代价：一旦出现问题，难以解决。就像开车，知道油门，摸一摸方向盘，想把车开走并不难；但是如果不在驾校好好学一学，遇到特殊情况，比如冷天要开空调消前挡风玻璃的雾气，就寸步难行。我当初也是，正开开心心写着业务逻辑，突然一块页面就不更新了，怎么改都不行，足足卡了我一天。\n\n从那以后，我就开始主动学习吸收 Vue 相关的知识，结合开发时遇到的问题，慢慢的，基本上不会再有哪个问题会卡住我很久了。继而，我也开始学习和总结 Vue 常见功能实现范式，摸索一些最佳实践什么的。现在，我想把这个过程当中积累下来的知识跟大家分享一下，其中包含：\n\n1. Vue 的双向绑定机制\n2. Vue 的生命周期\n3. 原生 JS\n4. Vue 全家桶\n5. 组件开发\n6. Webpack 相关配置\n\n目标读者\n--------\n\n1. 前端水平：初级、中级\n2. 有 Vue 开发经验\n3. 平时业务代码写的比较多，想学习技术细节的同学\n\n名词及约定\n--------\n\nVue 里没有明确提出类的概念。它的做法比较像工厂模式，`Vue` 是一个工厂，我们写配置 `config`，然后通过 `new Vue(config)` 的方式实例化。不过我仍然习惯将每个配置称为一个“Vue类”，很多时候，一个 Vue 组件，无论用法还是功能，也都相当于面向对象概念中的一个类。所以文中会混用“类”和“组件”，只在某些特定时刻强调它们的不同。\n\n本文写作时，Vue 3 仍在开发当中，关于它的消息已经透露不少。我的行文仍然会以 v2.6 为基础，如果 v3 会出现变化，我尽量备注出来。关于 v3 的一些介绍，我放在附录里面。\n\n为节省时间，范例代码中的 HTML 会以 pug 书写，这种语言很容易读，文中也用不到高级语法，应该问题不大。另外，如果你还在写原生 HTML 或 CSS，我建议你尽快切换到新语言。\n\n其它约定：\n\n1. 文中会混用 `getter` 与 `get`，`setter` 与 `set`，我相信结合上下文你们应该看得懂它的意思\n2. 范例代码以 ES6 为基础，也会使用 ES2017+ 新增语法，如果你对这些“新”语法不熟悉，附录里有一些资源方便你学习。\n\n文中代码的目标环境：\n\n1. Vue \u003e= 2.6\n2. Vuex \u003e= 3.1\n3. Vue-Router \u003e= 3.0\n4. Webpack \u003e= 4.29.6\n5. Node.js \u003e= 10.15\n\n作者介绍\n--------\n\n大家好，我叫翟路佳，花名“肉山”，这个名字跟 Dota 没关系，从高中起伴随我到现在。\n\n我热爱编程，喜欢学习，喜欢分享，从业十余年，投入的比较多，学习积累到的也比较多，对前端方方面面都有所了解，希望能与大家分享。\n\n我兴趣爱好比较广泛，尤其喜欢旅游，欢迎大家相互交流。\n\n我目前就职于 OpenResty Inc.，定居广州。\n\n你可以在这里找到我：\n\n* [博客](https://blog.meathill.com)\n* [微博](https://weibo.com/meathill)\n* [GitHub](https://github.com/meathill)\n\n或者通过 [邮件](mailto:meathill@gmail.com) 联系我。\n\n--------\n\n限于个人能力、知识视野、文字技术不足，文中难免有疏漏差错，如果你有任何疑问，欢迎在任何时间通过任何形式向我提出，我一定尽快答复修改。\n\n[GitHub issue](https://github.com/meathill/gitbook-path-to-advanced-vuer/issues)。\n\n再次感谢大家。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeathill%2Fgitbook-path-to-advanced-vuer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeathill%2Fgitbook-path-to-advanced-vuer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeathill%2Fgitbook-path-to-advanced-vuer/lists"}