Vue hook

Disclaimer: If you have any objection to this article, then please write your comments in the article comments at. If you find this article interesting, please share and forward, or you can look at, you acknowledge and encouragement of our articles. Wish everyone in the programming this road, farther and farther. https://blog.csdn.net/weixin_44369568/article/details/91488878

Vue hook

1, hook function

Instructions defined functions provides several hook function (optional):

• bind: called only once, the first instruction when the call is bound to the element, the hook function can be defined by a first initialization operation performed at the time of binding.

• inserted: calls (calls to a parent node is present, need not be present in the document) is inserted into the parent binding element.

• update: Called when the template is updated binding element is located, regardless of whether the binding value changes. By comparing the binding values ​​before and after the update, you can ignore unnecessary template update (hook function parameters detailed below).

• componentUpdated: template element is bound where the call is completed when the next update cycle.

• unbind: is called only once, when the call instruction and tie element solution.

2, the hook function parameters

Hook function parameters are:

1. el: instruction bound element, can be used to directly operate DOM.
2. binding: an object that contains the following properties:

name: 指令名，不包括 v- 前缀
value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

3. vnode: Vue compiler-generated virtual node.
4. oldVnode: a virtual node, available only in the update and componentUpdated hooks.