Vue 指令介绍

Question

内置指令

v-if

<li v-if="has">if</li>
<li v-else>else</li>

(has)
  ? _c('li',[_v("if")])
  : _c('li',[_v("else")])

v-for

<li v-for="(item, index) in list">v-for {{index}}</li>

_l((list), function (item, index) {
  return _c('li', [
    _v("v-for " + _s(index))
  ])
})

v-on

本质是 node.addEventListener 或者 (_target || target).removeEventListener

自定义指令

更新节点时，除了更新节点的内容外，还会触发 update 钩子函数。
因为标签上通常会绑定一些指令、事件或属性，这些内容也需要在更新节点时同步被更新。
因此，事件、指令、属性等相关处理逻辑只需要监听钩子函数，在钩子函数触发时执行相关处理逻辑即可实现功能。

指令的处理逻辑分别监听了 create、update 与 destroy。

虚拟 DOM 钩子函数

虚拟 DOM 在渲染时会触发的所有钩子函数：
init、create、activate、insert、prepatch、update、postpatch、destroy、remove