Vue 自定义指令核心原理与实战

在指令函数内部，你会接触到几个重要参数。最常用的是 el 和 binding。

• el：指令所绑定的真实 DOM 元素，这是你操作 DOM 的直接入口。
• binding：一个包含丰富信息的对象，包括绑定值、表达式、修饰符等。
• vnode：Vue 编译生成的虚拟节点，虽然较少直接使用，但在高级定制中很有用。

生命周期钩子

自定义指令不仅仅是个函数，它拥有完整的生命周期。理解这些钩子对于编写健壮的指令至关重要。

1. bind

只调用一次，当指令第一次绑定到元素时触发。适合做初始化动作，比如添加事件监听器。

2. inserted

被绑定元素插入父节点时调用。注意，只要父节点存在即可触发，不必存在于 document 中。这常用于需要获取元素尺寸或位置的场景。

3. update

当组件所在的模板更新时调用，无论绑定值是否真的变化。如果你需要根据新旧值对比来决定是否更新 DOM，可以在这里处理，避免不必要的渲染开销。

4. componentUpdated

被绑定元素所在模板完成一次更新周期后调用。相比 update，这个钩子更侧重于确保 DOM 已经完全同步。

5. unbind

指令与元素解绑时调用，只执行一次。用于清理副作用，比如移除之前添加的事件监听器。

为了演示解绑过程，我们可以手动销毁实例：

<div><button onclick="unbind()">解绑</button></div>

function unbind() {
    vm.$destroy(); // 销毁实例会触发指令的 unbind 钩子
}

完整的指令注册示例包含了所有钩子：

Vue.directive('lang', {
    bind: function(){
        console.log('1 - bind');
    },
    inserted: function(){
        console.log('2 - inserted');
    },
    update: function(){
        console.log('3 - update');
    },
    componentUpdated: function(){
        console.log('4 - componentUpdated');
    },
    unbind: function(){
        console.log('5 - unbind');
    }
});

小结

自定义指令是 Vue 扩展能力的利器，但请谨慎使用。如果仅仅是为了样式或简单交互，优先考虑 CSS 或组件化方案。只有在必须直接操作 DOM 时，才考虑引入自定义指令，保持代码的可维护性。