vue指令实现源码
以下是 Vue 指令实现的源码解析，主要分为核心实现逻辑和常见指令示例：
Vue 指令核心实现
Vue 的指令系统通过 directives 模块实现，核心代码位于 src/core/vdom/modules/directives.js。关键实现逻辑如下：
// 指令钩子函数
export default {
create: updateDirectives,
update: updateDirectives,
destroy: function unbindDirectives(vnode) {
updateDirectives(vnode, emptyNode)
}
}
function updateDirectives(oldVnode, vnode) {
if (oldVnode.data.directives || vnode.data.directives) {
_update(oldVnode, vnode)
}
}指令注册机制
指令通过 Vue.directive() 全局注册或组件选项的 directives 局部注册：
// 全局注册
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
// 局部注册
new Vue({
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
})常见内置指令实现
v-model
双向绑定实现原理（以 input 为例）：
function model(el, dir, _warn) {
const value = dir.value
const modifiers = dir.modifiers
const tag = el.tag
if (tag === 'input') {
el.addEventListener('input', () => {
context[value] = el.value
})
}
}v-show
通过 CSS display 属性控制：
function show(el, value) {
el.style.display = value ? '' : 'none'
}v-if/v-else
通过注释节点和条件渲染实现：
function processIfConditions(el, parent) {
const prev = findPrevElement(parent.children)
if (prev && prev.if) {
addIfCondition(prev, {
exp: el.elseif,
block: el
})
}
}自定义指令生命周期
指令包含以下生命周期钩子：
bind(el, binding, vnode) {
// 只调用一次，指令第一次绑定到元素时调用
}
inserted(el, binding, vnode) {
// 被绑定元素插入父节点时调用
}
update(el, binding, vnode, oldVnode) {
// 所在组件的 VNode 更新时调用
}
componentUpdated(el, binding, vnode, oldVnode) {
// 所在组件及子组件全部更新后调用
}
unbind(el, binding, vnode) {
// 只调用一次，指令与元素解绑时调用
}指令参数解析
binding 对象包含以下属性：
{
name: '指令名（不带v-前缀）',
value: '指令的绑定值',
oldValue: '指令绑定的前一个值',
expression: '字符串形式的指令表达式',
arg: '传给指令的参数',
modifiers: '包含修饰符的对象'
}以上内容展示了 Vue 指令系统的核心实现机制，包括注册方式、生命周期管理以及常见内置指令的实现原理。
