Lifecycle Diagram inconsistencies

[nils-werner]

The current lifecycle diagram is a bit inconsistent in a few places:

• 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.
• 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.
• 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.
• 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.

I 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:

                  [new Vue()]
                       |
                 [Observe Data]
                       |
                  [Init Events]
                       |
          (created)----|
                       |
                    <has el?>----NO---.
                       |              |
                   YES |              | vm.$mount(el)
                       |              |
                <has template?> <<----´
                       |
  (before compile) --- |
                       |
           .-----------|------------.
      YES  |                        |  NO
  [Compile and replace]    [Compile in-place]
           |                        |
           `-----------|------------´
                       |
    (compiled) ------- |
                       |
                <in document?>----NO----.
                       |                |
                   YES |                |  inserted into document
                       |                |
       (ready) ----- {READY}  ----------´
                       |
                  vm.$destroy()
                       |
  (beforeDestroy) ---- |
                       |
                  [tear down]
                       |
  (destroyed) --- {DESTROYED}

when I think it should look like

                    [new Vue()]
                         |
                   [Observe Data]
                         |
                    [Init Events]
                         |
           (created) --- |
                         |
                      <has el?> ---- NO ---.
                         |                 |
                     YES |                 | vm.$mount(el)
                         |                 |
                         | <<--------------´
                         |
    (before compile) --- |
                         |
                  <has template?> ---- NO -----.
                         |                     |
                     YES |                     |
                         |                     |
               [Compile and replace]    [Compile in-place]
                         |                     |
                         | <<------------------´
                         |
      (compiled) ------- |
                         |
                  <in document?> ---- NO ----.
                         |                   |
                     YES |                   |  inserted into document
                         |                   |
                         | <<----------------´
         (ready) ------- |
                         |
                      {READY}
                         |
                    vm.$destroy()
                         |
    (beforeDestroy) ---- |
                         |
                    [tear down]
                         |
     (destroyed) ------- |
                         |
                    {DESTROYED}

[yyx990803]

Thanks for the suggestion, but here's what I think:

The has el and in document no branches are not actions: they are just waiting for some conditions to be met (may never be met) before it can move on to the next action.

The has template check is different: both yes and no proceeds to different actions. I think it's worth having different diagrams for them because the semantics are indeed different.

[nils-werner]

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.

The way some of the boxes are currently used however breaks all convention.