大家好，欢迎来到今天的 Vue.js 自定义指令“生命奇旅”讲座！我是今天的向导，就叫我老司机吧，带大家一起探索 Vue 自定义指令的生命周期，看看它们是如何诞生成长，最终服务于我们的应用的。
开场白：指令，Vue 的强大助手
Vue 的指令（Directives）是模板语法的扩展，它们允许我们直接操作 DOM，实现更精细的控制。内置指令，比如 v-if、v-for、v-bind 等，已经足够强大，但有时我们仍然需要一些定制化的行为。这时，自定义指令就派上用场了。
想象一下，你需要一个自动聚焦的输入框，或者一个拖拽元素的功能，又或者你想在元素插入页面后执行一些初始化操作。这些都可以通过自定义指令来实现，让你的代码更简洁、更可复用。
核心：自定义指令的生命周期钩子
和 Vue 组件一样，自定义指令也有自己的生命周期钩子，它们在不同的阶段被调用，允许我们在指令的不同阶段执行特定的逻辑。这些钩子函数给了我们对 DOM 元素进行操作的机会，让我们可以实现各种各样的效果。
下面我们来详细了解一下这些钩子函数：
-
created(新版 Vue 3.x新增)-
时机： 指令实例被创建时调用。
-
参数：
el: 指令绑定到的元素。binding: 一个对象，包含以下属性：value: 传递给指令的值。例如：v-my-directive="1 + 1"，则value为2。oldValue: 之前的值，仅在update和componentUpdated钩子中可用。arg: 传递给指令的参数。例如：v-my-directive:foo，则arg为"foo"。modifiers: 一个包含修饰符的对象。例如：v-my-directive.prevent.stop，则modifiers为{ prevent: true, stop: true }。instance: 组件实例。dir: 指令定义对象。
vnode: 代表绑定元素的底层 VNode。prevVnode: 代表绑定元素的上一个 VNode。仅在update和componentUpdated钩子中可用。
-
作用： 进行一些初始化设置，比如绑定事件监听器、设置初始样式等。通常在这里对
el做一些准备工作，但此时el还没插入到 DOM 中。 -
应用场景： 可以在指令创建的时候初始化一些数据，例如为元素添加自定义属性等。
-
代码示例：
const app = Vue.createApp({ data() { return { message: 'Hello Vue!' } } }); app.directive('my-directive', { created(el, binding, vnode, prevVnode) { console.log('Directive created!'); el.setAttribute('data-my-directive', 'true'); // 设置自定义属性 } }); const vm = app.mount('#app');<div id="app"> <p v-my-directive>{{ message }}</p> </div>在控制台中，你会看到 "Directive created!"，并且
<p>元素会被添加data-my-directive="true"属性。 -
-
beforeMount-
时机： 指令绑定到元素后，且在挂载到 DOM 之前调用。
-
参数： 和
created一样。 -
作用： 可以在元素挂载到 DOM 之前进行一些操作，比如设置初始样式、绑定事件监听器等。
-
应用场景： 可以在指令绑定元素后，但元素还没插入DOM的时候进行一些初始化操作。
-
代码示例：
const app = Vue.createApp({ data() { return { message: 'Hello Vue!' } } }); app.directive('my-directive', { beforeMount(el, binding, vnode, prevVnode) { console.log('Directive beforeMount!'); el.style.color = 'red'; // 设置文本颜色 } }); const vm = app.mount('#app');<div id="app"> <p v-my-directive>{{ message }}</p> </div>在
<p>元素挂载到 DOM 之前，它的文本颜色会被设置为红色。 -
-
mounted-
时机： 指令绑定到的元素插入 DOM 后调用。
-
参数： 和
created一样。 -
作用： 可以在元素插入 DOM 后进行一些操作，比如获取元素的尺寸、绑定事件监听器等。这是最常用的钩子之一，通常在这里进行 DOM 操作。
-
应用场景： 需要在元素插入 DOM 后才能进行的操作，比如获取元素的尺寸、初始化第三方库等。
-
代码示例：
const app = Vue.createApp({ data() { return { message: 'Hello Vue!' } } }); app.directive('focus', { mounted(el) { console.log('Directive mounted!'); el.focus(); // 自动聚焦 } }); const vm = app.mount('#app');<div id="app"> <input type="text" v-focus value="Hello"> </div>当输入框插入 DOM 后，它会自动获得焦点。
-
-
beforeUpdate-
时机： 所在组件的 VNode 更新之前调用。
-
参数： 和
created一样，但多了oldValue和prevVnode。 -
作用： 可以在组件更新之前进行一些操作，比如比较新旧值、更新样式等。
-
应用场景： 在组件更新之前需要进行一些处理，比如根据新旧值判断是否需要重新渲染。
-
代码示例：
const app = Vue.createApp({ data() { return { message: 'Hello Vue!', count: 0 } }, methods: { increment() { this.count++; } } }); app.directive('my-directive', { beforeUpdate(el, binding, vnode, prevVnode) { console.log('Directive beforeUpdate! New value:', binding.value, 'Old value:', binding.oldValue); if (binding.value !== binding.oldValue) { el.style.backgroundColor = 'yellow'; // 如果值发生变化，设置背景色 } } }); const vm = app.mount('#app');<div id="app"> <p v-my-directive="count">{{ message }} - {{ count }}</p> <button @click="increment">Increment</button> </div>每次点击 "Increment" 按钮，
count的值发生变化，beforeUpdate钩子会被调用，并且<p>元素的背景色会被设置为黄色。 -
-
updated-
时机： 所在组件的 VNode 更新之后调用。
-
参数： 和
created一样，但多了oldValue和prevVnode。 -
作用： 可以在组件更新之后进行一些操作，比如更新元素的尺寸、重新初始化第三方库等。
-
应用场景： 在组件更新后需要进行一些处理，比如重新计算元素的位置、更新图表等。
-
代码示例：
const app = Vue.createApp({ data() { return { message: 'Hello Vue!', count: 0 } }, methods: { increment() { this.count++; } } }); app.directive('my-directive', { updated(el, binding, vnode, prevVnode) { console.log('Directive updated!'); el.textContent = 'Updated: ' + binding.value; // 更新文本内容 } }); const vm = app.mount('#app');<div id="app"> <p v-my-directive="count">{{ message }} - {{ count }}</p> <button @click="increment">Increment</button> </div>每次点击 "Increment" 按钮，
count的值发生变化，updated钩子会被调用，并且<p>元素的文本内容会被更新为 "Updated: " 加上最新的count值。 -
-
beforeUnmount-
时机： 指令与元素解绑之前调用。
-
参数： 和
created一样。 -
作用： 可以在元素解绑之前进行一些清理工作，比如移除事件监听器、取消定时器等。
-
应用场景： 在指令销毁前需要进行一些清理，比如移除事件监听器、释放资源等。
-
代码示例：
const app = Vue.createApp({ data() { return { show: true, message: 'Hello Vue!' } }, methods: { toggle() { this.show = !this.show; } } }); app.directive('my-directive', { beforeMount(el, binding, vnode, prevVnode) { el.addEventListener('click', () => { console.log('Element clicked!'); }); }, beforeUnmount(el, binding, vnode, prevVnode) { console.log('Directive beforeUnmount!'); // 注意：通常在这里移除事件监听器，避免内存泄漏 // el.removeEventListener('click', ...); // 如果你保存了监听器函数，可以这样移除 } }); const vm = app.mount('#app');<div id="app"> <p v-if="show" v-my-directive>{{ message }}</p> <button @click="toggle">Toggle</button> </div>当点击 "Toggle" 按钮，
show的值变为false，<p>元素会被移除，beforeUnmount钩子会被调用。 -
-
unmounted-
时机： 指令与元素解绑之后调用。
-
参数： 和
created一样。 -
作用： 可以在元素解绑之后进行一些清理工作，比如释放资源。
-
应用场景： 在指令销毁后需要进行一些清理，比如释放占用的内存。通常
beforeUnmount已经足够完成清理工作。unmounted用的相对较少。 -
代码示例：
const app = Vue.createApp({ data() { return { show: true, message: 'Hello Vue!' } }, methods: { toggle() { this.show = !this.show; } } }); app.directive('my-directive', { unmounted(el, binding, vnode, prevVnode) { console.log('Directive unmounted!'); // 理论上可以在这里做一些最后的资源释放，但通常在 beforeUnmount 中完成 } }); const vm = app.mount('#app');<div id="app"> <p v-if="show" v-my-directive>{{ message }}</p> <button @click="toggle">Toggle</button> </div>当点击 "Toggle" 按钮，
show的值变为false，<p>元素会被移除，unmounted钩子会被调用。 -
生命周期钩子概览表
| 钩子函数 | 时机 | 参数 | 作用 | 常用场景 |
|---|---|---|---|---|
created |
指令实例被创建时 | el, binding, vnode, prevVnode (Vue 3.x) |
进行初始化设置，但此时 el 还没插入到 DOM 中。 |
初始化数据，添加自定义属性。 |
beforeMount |
指令绑定到元素后，挂载到 DOM 之前 | el, binding, vnode, prevVnode (Vue 3.x) |
在元素挂载到 DOM 之前进行操作。 | 设置初始样式，绑定事件监听器。 |
mounted |
指令绑定到的元素插入 DOM 后 | el, binding, vnode, prevVnode (Vue 3.x) |
在元素插入 DOM 后进行操作。 | 获取元素的尺寸，绑定事件监听器，初始化第三方库，最常用的钩子之一，通常在这里进行 DOM 操作。 |
beforeUpdate |
所在组件的 VNode 更新之前 | el, binding, vnode, prevVnode, oldValue (Vue 3.x) |
在组件更新之前进行操作。 | 比较新旧值，更新样式。 |
updated |
所在组件的 VNode 更新之后 | el, binding, vnode, prevVnode, oldValue (Vue 3.x) |
在组件更新之后进行操作。 | 更新元素的尺寸，重新初始化第三方库。 |
beforeUnmount |
指令与元素解绑之前 | el, binding, vnode, prevVnode (Vue 3.x) |
在元素解绑之前进行清理工作。 | 移除事件监听器，取消定时器，释放资源，最常用的清理钩子。 |
unmounted |
指令与元素解绑之后 | el, binding, vnode, prevVnode (Vue 3.x) |
在元素解绑之后进行清理工作。 | 释放占用的内存。通常 beforeUnmount 已经足够完成清理工作。unmounted 用的相对较少。 |
指令注册方式：全局 vs. 局部
和组件一样，指令也可以全局注册和局部注册。
-
全局注册： 在
app.directive()中注册，所有组件都可以使用。const app = Vue.createApp({}); app.directive('my-global-directive', { mounted(el) { console.log('Global directive mounted!'); } }); -
局部注册： 在组件的
directives选项中注册，只有该组件及其子组件可以使用。const app = Vue.createApp({ components: { MyComponent: { template: '<p v-my-local-directive>Hello from component!</p>', directives: { 'my-local-directive': { mounted(el) { console.log('Local directive mounted!'); } } } } } });
一些实战案例：自定义指令的应用场景
-
自动聚焦指令：
app.directive('focus', { mounted(el) { el.focus(); } });<input type="text" v-focus>当元素插入 DOM 后，自动获得焦点。
-
图片懒加载指令：
app.directive('lazyload', { mounted(el, binding) { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { el.src = binding.value; observer.unobserve(el); } }); }); observer.observe(el); } });<img v-lazyload="imageUrl" alt="Lazy loaded image">当图片进入可视区域后，才加载图片，提高页面性能。
-
点击外部关闭指令：
app.directive('click-outside', { mounted(el, binding) { function documentHandler(e) { if (el.contains(e.target)) { return; } binding.value(e); } el.__vueClickOutside__ = documentHandler; document.addEventListener('click', documentHandler); }, beforeUnmount(el) { document.removeEventListener('click', el.__vueClickOutside__); delete el.__vueClickOutside__; } });<div v-click-outside="closeDropdown"> <!-- 下拉菜单内容 --> </div>点击下拉菜单外部区域时，关闭下拉菜单。 这里注意在
beforeUnmount中移除事件监听器，避免内存泄漏。 -
拖拽指令：
app.directive('draggable', { mounted(el) { el.style.position = 'absolute'; el.onmousedown = function(e) { let disX = e.clientX - el.offsetLeft; let disY = e.clientY - el.offsetTop; document.onmousemove = function(e) { let x = e.clientX - disX; let y = e.clientY - disY; el.style.left = x + 'px'; el.style.top = y + 'px'; } document.onmouseup = function() { document.onmousemove = document.onmouseup = null; } } } });<div v-draggable style="width: 100px; height: 100px; background-color: red;"></div>让元素可以被拖拽。
注意事项
- 性能： 避免在钩子函数中执行耗时的操作，以免影响页面性能。
- 内存泄漏： 在
beforeUnmount钩子中移除事件监听器、取消定时器，避免内存泄漏。 - DOM 操作： 尽量在
mounted和updated钩子中进行 DOM 操作，确保元素已经插入 DOM。 - 避免滥用： 不要过度使用自定义指令，优先考虑使用组件来实现复杂的功能。
- Vue 2.x 和 Vue 3.x 的差异： Vue 3.x 增加了
created钩子，并且参数有所调整，注意区分。
总结：指令，让你的 Vue 应用更上一层楼
自定义指令是 Vue.js 的强大特性，它允许我们扩展模板语法，直接操作 DOM，实现更精细的控制。通过理解指令的生命周期钩子，我们可以更好地掌握指令的行为，编写出更简洁、更可复用的代码。希望今天的讲座能帮助大家更好地理解和使用 Vue 的自定义指令！
好了，今天的“生命奇旅”就到这里，希望老司机没有翻车，咱们下期再见！