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
|
- 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 | | | | |
|---+---+---+-----------------+--------------------------------------------------------+---------+----------+-----------------------------------------------|
| | | | | | | | |
* 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
|
