{"action":"opened","issue":{"url":"https://api.github.com/repos/harwinvoid/blog/issues/3","repository_url":"https://api.github.com/repos/harwinvoid/blog","labels_url":"https://api.github.com/repos/harwinvoid/blog/issues/3/labels{/name}","comments_url":"https://api.github.com/repos/harwinvoid/blog/issues/3/comments","events_url":"https://api.github.com/repos/harwinvoid/blog/issues/3/events","html_url":"https://github.com/harwinvoid/blog/issues/3","id":339129049,"node_id":"MDU6SXNzdWUzMzkxMjkwNDk=","number":3,"title":"vue jsx 不完全指南","user":{"login":"harwinvoid","id":12931494,"node_id":"MDQ6VXNlcjEyOTMxNDk0","avatar_url":"https://avatars0.githubusercontent.com/u/12931494?v=4","gravatar_id":"","url":"https://api.github.com/users/harwinvoid","html_url":"https://github.com/harwinvoid","followers_url":"https://api.github.com/users/harwinvoid/followers","following_url":"https://api.github.com/users/harwinvoid/following{/other_user}","gists_url":"https://api.github.com/users/harwinvoid/gists{/gist_id}","starred_url":"https://api.github.com/users/harwinvoid/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/harwinvoid/subscriptions","organizations_url":"https://api.github.com/users/harwinvoid/orgs","repos_url":"https://api.github.com/users/harwinvoid/repos","events_url":"https://api.github.com/users/harwinvoid/events{/privacy}","received_events_url":"https://api.github.com/users/harwinvoid/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-07-07T08:38:56Z","updated_at":"2018-07-07T08:38:56Z","closed_at":null,"author_association":"OWNER","body":"Vue 作为日前最为火热的前端框架之一，其流行成都很大部分得益于对开发者友好。尤其是SFC(单文件组件)的模式深得人心，开发者通过在一个文件里同时书写模板，JS 逻辑以及样式，就能完成组件的封装，相比其他方式，组件更加内聚，便于维护。\r\n\r\n在 Vue 2.0 版本之后，Vue 增加了 `vdom` 以及 `render`函数等新特性,  template 模板并不会直接生成真实的 dom, 而是先编译为 `render` 函数， 再由 `render`函数 生成虚拟DOM。 因此除了使用\"传统\"的模板来构建 UI，也可以使用 `render` 函数，借助于 `JavaScript` 的 power，开发者可以更灵活的控制 UI。\r\n\r\n> Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。 \r\n\r\n于 React 栈（React & React Native）的开发者而言， render 函数再熟悉不过了(毕竟 React 中只能通过 render 函数来声明 UI) 。那是不是说明，我们可以用类似的方式来实现 Vue 组件。别高兴太早，我们先来看看[官网](https://cn.vuejs.org/v2/guide/render-function.html)给的例子吧。\r\n\r\n![image](https://user-images.githubusercontent.com/12931494/42408745-47cdabd4-8203-11e8-93ed-3d325bf0c563.png)\r\n\r\n这是什么鬼？`render` 函数里居然不是熟悉的 `jsx`,而是调用了非常原始的 `createElement`函数。这个本没有什么毛病，毕竟刚入门 React 时，是用的这个函数，且对于比较简单的UI ,这个函数足以胜任。我们在来看一个复杂的没有使用 `jsx` 的 `render` 函数。\r\n\r\n"}}
{"actor":{"display_login":"harwinvoid"}}