- Calling ~new Vue(...)~ creates a new Vue instance.
 - Creating a component with ~Vue.extend(...)~ creates a new subclass of
   Vue, not an instance.
 - An instance of that component is then created by a parent Vue
   instance.

Several of these have Functions as values.  ES6 introduced arrow
functions (~(args) => result~).  This handy new syntax seems tempting
to use here, but be warned!  The ~this~ variable works differently in
arrow functions than normal functions; in arrow functions it will be
~this~ in the scope where you defined the function; if you use
traditional function syntax, then ~this~ will be the Vue instance of
where the function is called.  The latter is probably what you want,
as these functions are mostly effectively private methods of your
components; so ~this~ should be the instance of your component.

 * C = Class
 * I = Instance
 * F = Functional Component

| C | I | F | name            | type                                                   | getter    | setter   | desc                                                    |
|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------|
|   |   |   | Data            |                                                        |           |          |                                                         |
|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------|
| Y |   | ? | ~data~          | Function () => Object                                  |           |          |                                                         |
|   | Y | ? | ~data~          | Object                                                 | ~$data~   |          |                                                         |
| Y | Y | ? | ~props~         | Array<String> / Object                                 |           |          |                                                         |
|   | Y |   | ~propsData~     | Map<String,?>                                          |           |          | for unit testing, not real use DEVELOPMENT              |
| Y | Y | ? | ~computed~      | Map<String,(Function/{"get":Function,"set":Function})> |           |          | derivatives of ~data~, for normalization, yo!           |
| Y | Y | ? | ~methods~       | Map<String,Function>                                   |           |          | define public methods                                   |
| Y | Y | ? | ~watch~         | Map<String,(String/Function/Object)>                   |           |          |                                                         |
|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------|
|   |   |   | DOM             |                                                        |           |          |                                                         |
|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------|
|   | Y |   | ~el~            | String / HTMLElement                                   | ~$el~     | ~$mount~ |                                                         |
| Y | Y | Y | ~template~      | String                                                 |           |          | overridden by render function                           |
| Y | Y |   | ~render~        | (createElement: () => VNode) => VNode                  |           |          |                                                         |
|   |   | Y | ~render~        | (createElement: () => VNode, context) => VNode         |           |          |                                                         |
| Y | Y | Y | ~renderError~   | (createElement: () => VNode, error: Error) => VNode    |           |          | WORKS ONLY IN DEVELOPMENT MODE                          |
|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------|
|   |   |   | Lifecycle hooks |                                                        |           |          |                                                         |
|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------|
| Y | Y | ? | ~beforeCreate~  | Function                                               |           |          | see: lifecycle                                          |
| Y | Y | ? | ~created~       | Function                                               |           |          | see: lifecycle                                          |
| Y | Y | ? | ~beforeMount~   | Function                                               |           |          |                                                         |
| Y | Y | ? | ~mounted~       | Function                                               |           |          |                                                         |
| Y | Y | ? | ~beforeUpdate~  | Function                                               |           |          |                                                         |
| Y | Y | ? | ~updated~       | Function                                               |           |          |                                                         |
| Y | Y | ? | ~activated~     | Function                                               |           |          |                                                         |
| Y | Y | ? | ~deactivated~   | Function                                               |           |          |                                                         |
| Y | Y | ? | ~beforeDestroy~ | Function                                               |           |          |                                                         |
| Y | Y | ? | ~destroyed~     | Function                                               |           |          |                                                         |
| Y | Y | ? | ~errorCaptured~ | (err: Error, vm: Component, info: string) => ?boolean  |           |          |                                                         |
|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------|
|   |   |   | Assets          |                                                        |           |          |                                                         |
|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------|
| Y | Y | ? | ~directives~    | Map<String,directive>                                  |           |          |                                                         |
| Y | Y | ? | ~filters~       | Map<String,filter>                                     |           |          |                                                         |
| Y | Y | ? | ~components~    | Map<String,component>                                  |           |          |                                                         |
|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------|
|   |   |   | Composition     |                                                        |           |          |                                                         |
|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------|
|   | Y | ? | ~parent~        | Vue instance                                           | ~$parent~ |          | also, child is pushed on to parent's ~.$children~ array |
| ? | Y | ? | ~mixins~        | Array<object>                                          |           |          |                                                         |
| Y | ? | ? | ~extends~       | Object (options object) / Function (constructor)       |           |          | exists to allow a SFC to extend another component       |
|   |   |   |                 |                                                        |           |          |                                                         |

* Data
** data

When instantiating the Vue instance, the ~data~ object will have its
properties recursively converted in to getters/setters to accomplish
reactivity.  *The Object must be plain*; browser API objects and
prototype properties are ignored.  The data should be just data---no
objects with https://vuejs.org/v2/guide/computed.htmltheir own stateful behavior.

additionally ~vm.a~ proxies to ~vm.$data.a~.  Properties starting with
~_~ or ~$~ are ignored.

When creating an instance, ~data~ is a specific Object; but when
creating a class, ~data~ is a Function that returns an Object that
will be used as the default ~data~ for instances of that class.

** props

A list of attributes that are exposed to accept data from the parent
component.

It seems kinda weird that ~props~ is an attribute of the child, not
the parent.

In the Object form, the keys are the list of props, and the values are
the type of that prop.

#+begin_src
props: {
	// type check
	height: Number,
	// type check plus other validations
	age: {
		type: Number,
		default: 0,
		required: true,
		validator: function (value) {
			return value >= 0
		}
	}
}
#+end_src

** propsData

Initial values for ~props~; for when there's no real parent, during
unit testing

** computed

https://vuejs.org/v2/guide/computed.html

** watch

TODO

* DOM
** el
* Lifecycle hooks
* Assets
* Composition
** extends

#+begin_src
var CompA = Vue.extend({ ... });
var CompB = CompA.extend({ ... });
#+end_src

can be written as

#+begin_src
var CompA = Vue.extend({ ... });
var CompB = {
	extends: CompA,
	...
};
#+end_src