{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vuejs.org/issues/251","repository_url":"https://api.github.com/repos/vuejs/vuejs.org","labels_url":"https://api.github.com/repos/vuejs/vuejs.org/issues/251/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vuejs.org/issues/251/comments","events_url":"https://api.github.com/repos/vuejs/vuejs.org/issues/251/events","html_url":"https://github.com/vuejs/vuejs.org/issues/251","id":140534952,"number":251,"title":"Lifecycle Diagram inconsistencies","user":{"login":"nils-werner","id":88704,"avatar_url":"https://avatars.githubusercontent.com/u/88704?v=3","gravatar_id":"","url":"https://api.github.com/users/nils-werner","html_url":"https://github.com/nils-werner","followers_url":"https://api.github.com/users/nils-werner/followers","following_url":"https://api.github.com/users/nils-werner/following{/other_user}","gists_url":"https://api.github.com/users/nils-werner/gists{/gist_id}","starred_url":"https://api.github.com/users/nils-werner/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nils-werner/subscriptions","organizations_url":"https://api.github.com/users/nils-werner/orgs","repos_url":"https://api.github.com/users/nils-werner/repos","events_url":"https://api.github.com/users/nils-werner/events{/privacy}","received_events_url":"https://api.github.com/users/nils-werner/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-03-13T22:11:14Z","updated_at":"2016-03-13T22:27:17Z","closed_at":"2016-03-13T22:19:55Z","body":"The current [lifecycle diagram](http://vuejs.org/guide/instance.html#Lifecycle_Diagram) is a bit inconsistent in a few places:\r\n\r\n - The first `if`'s \"no\" branch enters the second `if` through one of its exits (its \"no\"-exit). Instead it should join the main path and enter the second `if` as one common path.\r\n - The second `if`'s \"no\" exit is already occupied so the actual \"yes/no\" branch happens below the node. Instead the \"no\" branch should exit to the right.\r\n - The third `if`'s \"no\" branch enters \"ready\" from the side while it should merge with the main path and enter from the top as one common path.\r\n - Independently from the `if` blocks I think the `ready` and `destroyed` events should fire *before* the \"Ready\" and \"Destroyed\" states are reached. Right now the fire *while* the states are reached.\r\n\r\nI would have posted a PR but there are no sources for the diagram available so I will just post a crude ASCII art of what I mean. Currently it looks like:\r\n\r\n                      [new Vue()]\r\n                           |\r\n                     [Observe Data]\r\n                           |\r\n                      [Init Events]\r\n                           |\r\n              (created)----|\r\n                           |\r\n                        <has el?>----NO---.\r\n                           |              |\r\n                       YES |              | vm.$mount(el)\r\n                           |              |\r\n                    <has template?> <<----´\r\n                           |\r\n      (before compile) --- |\r\n                           |\r\n               .-----------|------------.\r\n          YES  |                        |  NO\r\n      [Compile and replace]    [Compile in-place]\r\n               |                        |\r\n               `-----------|------------´\r\n                           |\r\n        (compiled) ------- |\r\n                           |\r\n                    <in document?>----NO----.\r\n                           |                |\r\n                       YES |                |  inserted into document\r\n                           |                |\r\n           (ready) ----- {READY}  ----------´\r\n                           |\r\n                      vm.$destroy()\r\n                           |\r\n      (beforeDestroy) ---- |\r\n                           |\r\n                      [tear down]\r\n                           |\r\n      (destroyed) --- {DESTROYED}\r\n\r\nwhen I think it should look like\r\n\r\n                        [new Vue()]\r\n                             |\r\n                       [Observe Data]\r\n                             |\r\n                        [Init Events]\r\n                             |\r\n               (created) --- |\r\n                             |\r\n                          <has el?> ---- NO ---.\r\n                             |                 |\r\n                         YES |                 | vm.$mount(el)\r\n                             |                 |\r\n                             | <<--------------´\r\n                             |\r\n        (before compile) --- |\r\n                             |\r\n                      <has template?> ---- NO -----.\r\n                             |                     |\r\n                         YES |                     |\r\n                             |                     |\r\n                   [Compile and replace]    [Compile in-place]\r\n                             |                     |\r\n                             | <<------------------´\r\n                             |\r\n          (compiled) ------- |\r\n                             |\r\n                      <in document?> ---- NO ----.\r\n                             |                   |\r\n                         YES |                   |  inserted into document\r\n                             |                   |\r\n                             | <<----------------´\r\n             (ready) ------- |\r\n                             |\r\n                          {READY}\r\n                             |\r\n                        vm.$destroy()\r\n                             |\r\n        (beforeDestroy) ---- |\r\n                             |\r\n                        [tear down]\r\n                             |\r\n         (destroyed) ------- |\r\n                             |\r\n                        {DESTROYED}\r\n"},"comment":{"url":"https://api.github.com/repos/vuejs/vuejs.org/issues/comments/196069611","html_url":"https://github.com/vuejs/vuejs.org/issues/251#issuecomment-196069611","issue_url":"https://api.github.com/repos/vuejs/vuejs.org/issues/251","id":196069611,"user":{"login":"nils-werner","id":88704,"avatar_url":"https://avatars.githubusercontent.com/u/88704?v=3","gravatar_id":"","url":"https://api.github.com/users/nils-werner","html_url":"https://github.com/nils-werner","followers_url":"https://api.github.com/users/nils-werner/followers","following_url":"https://api.github.com/users/nils-werner/following{/other_user}","gists_url":"https://api.github.com/users/nils-werner/gists{/gist_id}","starred_url":"https://api.github.com/users/nils-werner/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nils-werner/subscriptions","organizations_url":"https://api.github.com/users/nils-werner/orgs","repos_url":"https://api.github.com/users/nils-werner/repos","events_url":"https://api.github.com/users/nils-werner/events{/privacy}","received_events_url":"https://api.github.com/users/nils-werner/received_events","type":"User","site_admin":false},"created_at":"2016-03-13T22:27:17Z","updated_at":"2016-03-13T22:27:17Z","body":"I see what you mean and that difference is depicted by having a green box vs not having one. If you look closely you will notice that will not be changed by what I mean.\r\n\r\nThe way some of the boxes are currently used however breaks all convention."}}