1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
- 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
|
