{"action":"opened","issue":{"url":"https://api.github.com/repos/wu-kai/Blog/issues/4","repository_url":"https://api.github.com/repos/wu-kai/Blog","labels_url":"https://api.github.com/repos/wu-kai/Blog/issues/4/labels{/name}","comments_url":"https://api.github.com/repos/wu-kai/Blog/issues/4/comments","events_url":"https://api.github.com/repos/wu-kai/Blog/issues/4/events","html_url":"https://github.com/wu-kai/Blog/issues/4","id":250881170,"number":4,"title":"Vue的异步组件","user":{"login":"wu-kai","id":12909883,"avatar_url":"https://avatars1.githubusercontent.com/u/12909883?v=4","gravatar_id":"","url":"https://api.github.com/users/wu-kai","html_url":"https://github.com/wu-kai","followers_url":"https://api.github.com/users/wu-kai/followers","following_url":"https://api.github.com/users/wu-kai/following{/other_user}","gists_url":"https://api.github.com/users/wu-kai/gists{/gist_id}","starred_url":"https://api.github.com/users/wu-kai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wu-kai/subscriptions","organizations_url":"https://api.github.com/users/wu-kai/orgs","repos_url":"https://api.github.com/users/wu-kai/repos","events_url":"https://api.github.com/users/wu-kai/events{/privacy}","received_events_url":"https://api.github.com/users/wu-kai/received_events","type":"User","site_admin":false},"labels":[{"id":668325415,"url":"https://api.github.com/repos/wu-kai/Blog/labels/Doing","name":"Doing","color":"c2e0c6","default":false},{"id":668325873,"url":"https://api.github.com/repos/wu-kai/Blog/labels/Vue","name":"Vue","color":"b60205","default":false},{"id":668325822,"url":"https://api.github.com/repos/wu-kai/Blog/labels/webpack","name":"webpack","color":"bfd4f2","default":false},{"id":668326442,"url":"https://api.github.com/repos/wu-kai/Blog/labels/%E8%87%AA%E5%A8%B1%E8%87%AA%E4%B9%90","name":"自娱自乐","color":"5319e7","default":false},{"id":668326591,"url":"https://api.github.com/repos/wu-kai/Blog/labels/%E8%AF%BB%E4%B9%A6%E5%BF%83%E5%BE%97","name":"读书心得","color":"c2e0c6","default":false}],"state":"open","locked":false,"assignee":{"login":"wu-kai","id":12909883,"avatar_url":"https://avatars1.githubusercontent.com/u/12909883?v=4","gravatar_id":"","url":"https://api.github.com/users/wu-kai","html_url":"https://github.com/wu-kai","followers_url":"https://api.github.com/users/wu-kai/followers","following_url":"https://api.github.com/users/wu-kai/following{/other_user}","gists_url":"https://api.github.com/users/wu-kai/gists{/gist_id}","starred_url":"https://api.github.com/users/wu-kai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wu-kai/subscriptions","organizations_url":"https://api.github.com/users/wu-kai/orgs","repos_url":"https://api.github.com/users/wu-kai/repos","events_url":"https://api.github.com/users/wu-kai/events{/privacy}","received_events_url":"https://api.github.com/users/wu-kai/received_events","type":"User","site_admin":false},"assignees":[{"login":"wu-kai","id":12909883,"avatar_url":"https://avatars1.githubusercontent.com/u/12909883?v=4","gravatar_id":"","url":"https://api.github.com/users/wu-kai","html_url":"https://github.com/wu-kai","followers_url":"https://api.github.com/users/wu-kai/followers","following_url":"https://api.github.com/users/wu-kai/following{/other_user}","gists_url":"https://api.github.com/users/wu-kai/gists{/gist_id}","starred_url":"https://api.github.com/users/wu-kai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wu-kai/subscriptions","organizations_url":"https://api.github.com/users/wu-kai/orgs","repos_url":"https://api.github.com/users/wu-kai/repos","events_url":"https://api.github.com/users/wu-kai/events{/privacy}","received_events_url":"https://api.github.com/users/wu-kai/received_events","type":"User","site_admin":false}],"milestone":null,"comments":0,"created_at":"2017-08-17T09:24:19Z","updated_at":"2017-08-17T09:24:19Z","closed_at":null,"body":"> 今天读Vue文档的时候仔细看了一下异步组件部分，第一次看的时候一脸懵逼，看第二次还是有点迷茫，第三次就有点感觉了，第四次感觉有点明白了，遂记录一下我自己的理解，可能是错的，希望大佬们可以指点迷津，也百度谷歌了一下，有对异步加载的使用进行描述的，但是感觉没有进行分析的，所以还是有一些困惑\r\n\r\n## Vue异步组件\r\n\r\n为什么需要异步组件，道理和webpack的按需加载是一样的，如果一开始就加载所有的组件，那么是比较耗时的，所以我们可以将一些组件定义为异步组件，在需要使用的时候再进行加载。\r\n\r\n所以好处的话就显而易见了 ：\r\n1. 按需加载，可以节省首次加载的时间，提高速度，也算是一个性能优化。\r\n2. 那么一个组件可能会被使用多次，按需加载的话也不会加载多次，第一次加载完成就会缓存下来，和webpack是一样的，所以不用担心\r\n\r\n![image](https://user-images.githubusercontent.com/12909883/29403258-65f4c6a8-836a-11e7-92aa-a76d5448c6d8.png)\r\n\r\n\r\n> 好了，装逼结束，接下来一起来读文档吧\r\n\r\n\r\n\r\n## 文档搬运\r\n文档对异步组件的描述是这样的：\r\n\r\n- Vue 允许将组件定义为一个异步解析组件定义的工厂函数。Vue 只在实际需要渲染组件时，才触发调用工厂函数，并且会将结果缓存起来，用于将来再次渲染。\r\n\r\n> 以及这样的：\r\n\r\n- 工厂函数接收一个 resolve 回调函数，在从服务器接收到组件定义时调用。也可以调用 reject(reason) 表明加载失败。\r\n\r\n> 还有这样的：\r\n\r\n- 要使用异步组件，一个比较推荐的方式是配合 webpack 代码分离功能 。\r\n\r\n下面是文档中的栗子：\r\n\r\n\r\n```\r\nVue.component('async-webpack-example', function (resolve) {\r\n  // 这个特殊的 require 语法\r\n  // 将指示 webpack 自动将构建完成的代码，\r\n  // 拆分到不同的 bundle 中，然后通过 Ajax 请求加载。\r\n  require(['./my-async-component'], resolve)\r\n})\r\n```\r\n\r\n>  好吧，我连注释都没删，但是第一次看是比较懵逼的，看不懂。不过多读两遍就好了。\r\n\r\n\r\n## 抛砖引玉\r\n\r\n\r\n Vue 只在实际需要渲染组件时，才触发调用工厂函数\r\n\r\n> 我是这么理解的（纯属虾米扯着蛋了）：\r\n\r\n1. 上面的代码中是已经在注册了一个全局的组件名字叫\"async-webpack-example\"。\r\n\r\n2. 这个已经注册的组件是只有一个名字的，是没有实体的，就像一个空壳，等着被填充。\r\n\r\n3. 当我们在使用到这个组件的时候，就调用上面代码中的工厂函数，然后就触发webpack的异步加载模块方法，详情可以去看webpack文档中的代码分割部分，或者等着看我的文章《webpack如何实现按需加载》。\r\n\r\n4. 此时就会去异步的请求一个模块，当请求成功后，这个模块的内容就是“async-webpack-example”组件的实体部分，(还有个回调函数，感觉没啥用......乱说的不要打我)那么到了这一步，我们在使用到\"async-webpack-example\"组件的地方就完成了由只有一个组件名，到异步加载实体内容这么一个过程，并在相应的地方进行内容渲染，也就是所谓的异步加载组件，然后加载的内容就会被缓存下来。\r\n\r\n\r\n\r\n## 遗言\r\n\r\n当然异步加载组件不是只有只用webpack一种方式，就像你加载js模块一样，方式不是唯一的，文档里面还介绍了使用webpack2+es6的语法\r\n> 呃。。。。还是需要webpack，不过重点是es6的语法，就自己去看文档吧。\r\n\r\n上面的代码是注册全局异步组件，如果是局部注册的话，我相信应该也不难，算了，我觉得很多人和我一样懒，我就写一下吧：\r\n\r\n```\r\nnew Vue({\r\n  // ...\r\n  components: {\r\n    'my-component': function(resolve){\r\n          require(['./my-async-component'], resolve)\r\n     }\r\n  }\r\n})\r\n```\r\n\r\n> 如果你是需要使用异步组件的 Browserify 用户，可能就无法使用异步组件了，它的作者已经明确表示很不幸 Browserify 是不支持异步加载的。Browserify 社区找到一些解决方案，这可能有助于现有的复杂应用程序实现异步加载。对于所有其他场景，我们推荐直接使用 webpack 所内置的一流异步支持。\r\n\r\n还有就是在高级的异步组件里，工厂对象可以返回一个对象，对象里面是一些配置参数，比如加载组件，在加载中应该加载什么组件，错误的时候加载什么组件，等等自己去看吧\r\n\r\n\r\n> 有相信有很多地方我理解的不是很到位，乃至理解根本是错的，希望大佬们别给面子都指出来\r\n\r\n\r\n恩，over......\r\n\r\n\r\n\r\n\r\n![rk4 cxdnw _ my0nc sbax](https://user-images.githubusercontent.com/12909883/29405566-cceb1d20-8370-11e7-9058-8aa6a98fdba0.jpg)\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"wu-kai"}}