vue指令实现
Vue 指令实现
Vue 指令是 Vue.js 提供的一种特殊属性，用于在 DOM 元素上绑定行为。指令通常以 v- 开头，例如 v-model、v-if、v-for 等。自定义指令可以扩展 Vue 的功能，实现特定的 DOM 操作。
自定义指令的基本结构
自定义指令可以通过 Vue.directive 方法注册。指令定义对象可以包含以下几个钩子函数：
bind：指令第一次绑定到元素时调用。inserted：被绑定元素插入父节点时调用。update：所在组件的 VNode 更新时调用。componentUpdated：所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：指令与元素解绑时调用。
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})指令钩子函数的参数
每个钩子函数可以接收以下参数：
el：指令所绑定的元素，可以直接操作 DOM。binding：一个对象，包含以下属性：name：指令名，不包括v-前缀。value：指令的绑定值，例如v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated中可用。expression：字符串形式的指令表达式，例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数，例如v-my-directive:foo中，参数为"foo"。modifiers：一个包含修饰符的对象，例如v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
动态指令参数
指令的参数可以是动态的。例如，v-mydirective:[argument]="value" 中，argument 可以根据组件实例的数据动态更新。
Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
const s = binding.arg || 'top'
el.style[s] = binding.value + 'px'
}
})函数简写
如果指令在 bind 和 update 时触发相同行为，可以简写为一个函数。
Vue.directive('color', function (el, binding) {
el.style.color = binding.value
})使用自定义指令
注册自定义指令后，可以在模板中使用。
<input v-focus>
<div v-pin:bottom="200">I am pinned 200px from the bottom.</div>
<p v-color="'red'">This text is red.</p>全局指令与局部指令
全局指令通过 Vue.directive 注册，可以在所有组件中使用。局部指令在组件选项中通过 directives 注册，仅在该组件中可用。
new Vue({
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
})指令的常见应用场景
- 表单自动聚焦（
v-focus）。 - 元素拖拽（
v-drag）。 - 权限控制（
v-permission）。 - 图片懒加载（
v-lazy）。 - 防抖或节流（
v-throttle）。
通过自定义指令，可以封装常见的 DOM 操作，提高代码的复用性和可维护性。
