一文吃透！Vue2和Vue3中directive的update钩子函数及自定义操作实战

引言

在前端开发的江湖中，Vue.js一直凭借其简洁易用和高效的特性，深受广大开发者的喜爱。无论是Vue2还是Vue3，自定义指令（directive）都是非常强大的功能，而其中的update钩子函数更是暗藏玄机，能帮助我们在组件更新时大显身手。今天，咱就用大白话唠唠这update钩子函数到底是干啥的，以及咋在组件更新时用它搞点自定义操作。

Vue自定义指令基础回顾

在正式聊update钩子函数之前，咱先简单回顾下Vue自定义指令。自定义指令这玩意儿，能让我们对DOM进行更底层的操作，实现一些Vue自带指令干不了的事儿。比如说，我们想给一个按钮添加防抖功能，让用户短时间内多次点击也只触发一次事件，又或者想实现图片的懒加载，当图片进入视口时才加载，这些需求都可以通过自定义指令来搞定。

在Vue中，自定义指令有好几个钩子函数，像bind、inserted、update、componentUpdated和unbind。每个钩子函数都有它特定的触发时机和用途。bind钩子函数在指令首次绑定到元素时调用，只调用一次，这时候可以进行一些初始化的操作。inserted钩子函数在被绑定元素插入到父节点时调用（仅保证父节点存在，但不一定已被插入到文档中）。unbind钩子函数则是在指令与元素解绑时调用，也只调用一次。而今天的主角update钩子函数，以及componentUpdated钩子函数，都和组件更新有关，下面咱重点说说它们。

Vue2中update钩子函数详解

作用与触发时机

在Vue2中，update钩子函数会在所在组件的VNode更新时调用，但此时子VNode可能尚未更新。啥意思呢？就是说当组件的数据发生变化，导致虚拟DOM要更新的时候，update钩子函数就会被触发。不过得注意，这时候组件的子元素可能还没更新完呢。比如说，有一个父组件包含了多个子组件，当父组件的数据变化触发更新时，父组件的update钩子函数会先被调用，然后才会去更新子组件，子组件更新完成后才会触发componentUpdated钩子函数。

钩子函数参数

update钩子函数会接收几个参数，这些参数可重要了，能帮助我们在钩子函数里获取很多有用的信息。

• el：指令所绑定的元素，通过它我们可以直接操作DOM。比如说，想改变元素的样式、属性啥的，都可以通过el来实现。
• binding：这是一个对象，包含了很多和指令相关的信息。
  • value：指令绑定的值。比如说我们自定义一个指令v - myDirective="someValue"，这里的someValue就是binding.value。
  • oldValue：指令绑定的前一个值，在update和componentUpdated钩子中可用，无论值是否改变都能获取到。这个参数在我们需要对比前后值变化的时候非常有用。
  • arg：传递给指令的参数。例如v - myDirective:argValue，这里的argValue就是arg。
  • modifiers：包含修饰符的对象。像v - myDirective. modifier1. modifier2，modifiers对象里就会包含modifier1和modifier2。
• vnode：代表指令绑定元素的虚拟节点。通过它我们可以获取到更多关于组件和元素的信息，不过操作起来相对复杂一些，一般在需要对虚拟DOM进行深度操作的时候会用到。
• oldVnode：上一个虚拟节点，在update和componentUpdated钩子中可用，用于和当前的vnode进行对比。

利用update钩子函数进行自定义操作示例

下面咱通过一个实际例子来看看在Vue2中怎么利用update钩子函数进行自定义操作。假设我们有一个需求，当一个输入框的值发生变化时，我们要实时更新另一个元素的文本内容，并且给这个元素添加一个特定的样式。

首先，在Vue实例中定义一个自定义指令：

// 全局定义一个自定义指令
Vue.directive('updateText', {
  // 当指令绑定到元素时，进行一些初始化操作（这里简单设置一个初始样式）
  bind: function (el, binding) {
    el.style.color = 'blue';
  },
  // 当组件更新，指令所在元素的VNode更新时触发
  update: function (el, binding) {
    // 将绑定的值更新到元素的文本内容
    el.textContent = binding.value;
    // 根据绑定的值是否为空，来改变元素的背景颜色
    if (binding.value) {
      el.style.backgroundColor = 'lightgreen';
    } else {
      el.style.backgroundColor = 'white';
    }
  }
});

然后在模板中使用这个自定义指令：

<template>
  <div>
    <input v - model="inputValue" placeholder="请输入内容">
    <div v - updateText="inputValue"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

在这个例子中，当我们在输入框中输入内容时，inputValue会发生变化，从而触发组件更新。updateText指令的update钩子函数就会被调用，它会根据inputValue的值更新div元素的文本内容和背景颜色。

Vue3中update钩子函数详解

变化与新特性

Vue3相较于Vue2，在自定义指令的钩子函数上有一些变化。虽然功能上大致相似，但在使用方式和一些细节上有所不同。在Vue3中，自定义指令的钩子函数与Vue2的生命周期大致对应，但名称和触发时机有微调。其中，与Vue2中update钩子函数对应的是updated钩子函数。

updated钩子函数会在组件更新后，并且组件的所有子组件也都更新完成后调用。也就是说，在Vue3中，updated钩子函数的触发时机比Vue2中的update钩子函数更靠后，能确保整个组件树都已经更新完毕。这在一些需要依赖整个组件树更新结果的操作中非常有用。

钩子函数参数

Vue3中updated钩子函数的参数和Vue2中update钩子函数的参数类似，但也有一些小变化。

• el：指令所绑定的元素，和Vue2中一样，通过它可以直接操作DOM。
• binding：同样是包含指令相关信息的对象。
  • value：指令绑定的值。
  • oldValue：指令绑定的前一个值，在beforeUpdate和updated钩子中可用。这里需要注意的是，在Vue3中，oldValue的获取方式和Vue2略有不同，它是通过binding对象来获取的。
  • arg：传递给指令的参数。
  • modifiers：包含修饰符的对象。
• instance：使用该指令的组件实例。这个参数在Vue3中是新增加的，通过它我们可以访问到组件实例的一些属性和方法，方便在指令中与组件进行交互。
• vnode：代表指令绑定元素的虚拟节点。
• prevVNode：上一个虚拟节点，在beforeUpdate和updated钩子中可用，用于和当前的vnode进行对比。和Vue2中不同的是，这里它的名称变为了prevVNode。

利用updated钩子函数进行自定义操作示例

接下来，我们看看在Vue3中如何利用updated钩子函数实现类似的功能。同样是输入框值变化实时更新另一个元素的文本内容和样式。

首先，在Vue3项目中定义一个自定义指令（这里以全局指令为例）：

// 在main.js中定义全局自定义指令
import { createApp } from 'vue';
const app = createApp({});
app.directive('updateText', {
  // 在元素挂载完成后，进行一些初始化操作（这里简单设置一个初始样式）
  mounted(el, binding) {
    el.style.color = 'blue';
  },
  // 当组件和子组件都更新完成后触发
  updated(el, binding) {
    // 将绑定的值更新到元素的文本内容
    el.textContent = binding.value;
    // 根据绑定的值是否为空，来改变元素的背景颜色
    if (binding.value) {
      el.style.backgroundColor = 'lightgreen';
    } else {
      el.style.backgroundColor = 'white';
    }
  }
});

然后在组件模板中使用这个自定义指令：

<template>
  <div>
    <input v - model="inputValue" placeholder="请输入内容">
    <div v - updateText="inputValue"></div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

在这个Vue3的例子中，当输入框的值变化时，inputValue更新，触发组件更新。等组件及其所有子组件都更新完成后，updateText指令的updated钩子函数被调用，实现了和Vue2中类似的功能，即更新div元素的文本内容和背景颜色。

Vue2和Vue3中update钩子函数对比总结

通过上面的介绍和示例，我们可以看出Vue2中的update钩子函数和Vue3中的updated钩子函数虽然都和组件更新相关，但在触发时机和参数细节上有一些区别。

触发时机

• Vue2的update钩子函数在组件的VNode更新时调用，但子VNode可能尚未更新。这意味着它触发得相对较早，在一些需要在组件更新过程中，对子组件更新之前进行操作的场景中比较有用。
• Vue3的updated钩子函数在组件更新后，并且组件的所有子组件也都更新完成后调用。它能确保整个组件树都已经更新完毕，适用于需要依赖整个组件树更新结果的操作。

参数区别

• 在参数方面，Vue2和Vue3都有el、binding、vnode等参数，但在一些细节上有所不同。例如，Vue3中的binding对象获取oldValue的方式和Vue2略有不同，并且Vue3中新增了instance参数，方便在指令中访问组件实例。

适用场景

• 当我们需要在组件更新时，尽快对指令绑定的元素进行操作，并且不需要等待子组件完全更新时，可以考虑在Vue2中使用update钩子函数，或者在Vue3中使用beforeUpdate钩子函数（虽然名称不同，但触发时机类似）。
• 如果我们的操作需要依赖整个组件树的更新结果，比如需要根据子组件更新后的状态来更新指令绑定元素的样式或行为，那么在Vue2中可以使用componentUpdated钩子函数，在Vue3中则使用updated钩子函数。

常见应用场景与实战案例

实时数据同步展示

在很多项目中，我们经常会遇到需要实时展示数据变化的需求。比如说，一个实时显示系统状态的面板，系统状态数据可能会频繁更新，我们希望面板上的数据能实时同步变化。这时候就可以利用自定义指令的update（Vue2）或updated（Vue3）钩子函数来实现。

假设我们有一个系统状态数据对象，包含了系统的运行状态、负载情况等信息。我们可以定义一个自定义指令，当状态数据变化时，自动更新页面上对应的元素显示。

在Vue2中的实现：

Vue.directive('syncStatus', {
  update: function (el, binding) {
    const status = binding.value;
    // 根据不同的状态字段，更新元素的文本内容和样式
    el.querySelector('.status - text').textContent = `运行状态: ${status.running ? '正常' : '异常'}`;
    el.querySelector('.load - text').textContent = `负载情况: ${status.load}`;
    if (status.running) {
      el.style.backgroundColor = 'green';
    } else {
      el.style.backgroundColor ='red';
    }
  }
});

在模板中的使用：

<template>
  <div v - syncStatus="systemStatus">
    <span class="status - text"></span>
    <span class="load - text"></span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      systemStatus: {
        running: true,
        load: '50%'
      }
    };
  },
  // 模拟数据更新
  mounted() {
    setInterval(() => {
      this.systemStatus.running = Math.random() > 0.5;
      this.systemStatus.load = `${Math.floor(Math.random() * 100)}%`;
    }, 3000);
  }
};
</script>

在Vue3中的实现：

import { createApp } from 'vue';
const app = createApp({});
app.directive('syncStatus', {
  updated: function (el, binding) {
    const status = binding.value;
    // 根据不同的状态字段，更新元素的文本内容和样式
    el.querySelector('.status - text').textContent = `运行状态: ${status.running? '正常' : '异常'}`;
    el.querySelector('.load - text').textContent = `负载情况: ${status.load}`;
    if (status.running) {
      el.style.backgroundColor = 'green';
    } else {
      el.style.backgroundColor ='red';
    }
  }
});

在组件模板中的使用：

<template>
  <div v - syncStatus="systemStatus">
    <span class="status - text"></span>
    <span class="load - text"></span>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const systemStatus = ref({
  running: true,
  load: '50%'
});
// 模拟数据更新
setInterval(() => {
  systemStatus.value.running = Math.random() > 0.5;
  systemStatus.value.load = `${Math.floor(Math.random() * 100)}%`;
}, 3000);
</script>

通过这样的方式，当systemStatus数据发生变化时，syncStatus指令的update（Vue2）或updated（Vue3）钩子函数会被触发，实时更新页面上的显示内容。

动态样式更新

有时候，我们需要根据组件的状态或数据变化，动态地更新元素的样式。比如，一个图片展示组件，当鼠标悬停在图片上时，图片会放大并添加一个阴影效果。我们可以利用自定义指令来实现这个功能，并且在组件更新时（例如图片数据源变化导致图片更新），确保样式也能正确更新。

在Vue2中的实现：

Vue.directive('imageHoverEffect', {
  bind: function (el, binding) {
    // 初始化样式
    el.style.transition = 'all 0.3s ease - in - out';
  },
  update: function (el, binding) {
    // 这里可以根据binding.value中的一些配置来更新样式，比如图片的大小等
    if (binding.value) {
      el.style.width = '200px';
      el.style.height = '200px';
    } else {
      el.style.width = '150px';
      el.style.height = '150px';
    }
  },
  inserted: function (el, binding) {
    // 绑定鼠标悬停事件
    el.addEventListener('mouseenter', function () {
      el.style.transform ='scale(1.2)';
      el.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
    });
    el.addEventListener('mouseleave', function () {
      el.style.transform ='scale(1)';
      el.style.boxShadow = 'none';
    });
  }
});

在模板中的使用：

<template>
  <div>
    <img v - imageHoverEffect="isLargeImage" :src="imageUrl" alt="图片">
  </div>
</template>
<script>
export default {
  data() {
    return {
      isLargeImage: true,
      imageUrl: 'https://example.com/image.jpg'
    };
  },
  // 模拟数据更新，切换图片大小状态
  methods: {
    toggleImageSize() {
      this.isLargeImage =!this.isLargeImage;
    }
  }
};
</script>

我将延续上文风格，先完成动态样式更新在Vue3中的代码实现，再拓展新的应用场景，继续深入讲解update和updated钩子函数的实战应用。

在Vue3中的实现：

import { createApp } from 'vue';
const app = createApp({});
app.directive('imageHoverEffect', {
  mounted: function (el, binding) {
    // 初始化样式
    el.style.transition = 'all 0.3s ease - in - out';
    // 绑定鼠标悬停事件
    el.addEventListener('mouseenter', function () {
      el.style.transform ='scale(1.2)';
      el.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
    });
    el.addEventListener('mouseleave', function () {
      el.style.transform ='scale(1)';
      el.style.boxShadow = 'none';
    });
  },
  updated: function (el, binding) {
    // 根据binding.value中的配置来更新样式，比如图片的大小等
    if (binding.value) {
      el.style.width = '200px';
      el.style.height = '200px';
    } else {
      el.style.width = '150px';
      el.style.height = '150px';
    }
  }
});

在组件模板中的使用：

<template>
  <div>
    <img v - imageHoverEffect="isLargeImage" :src="imageUrl" alt="图片">
  </div>
</template>
<script setup>
import { ref } from 'vue';
const isLargeImage = ref(true);
const imageUrl = ref('https://example.com/image.jpg');
// 模拟数据更新，切换图片大小状态
const toggleImageSize = () => {
  isLargeImage.value =!isLargeImage.value;
};
</script>

当isLargeImage的值改变，触发组件更新后，imageHoverEffect指令的updated钩子函数就会根据新的值调整图片样式，同时鼠标悬停的交互效果也依然有效 。

输入框实时校验

在表单开发中，输入框的实时校验是很常见的需求。比如限制输入框只能输入数字，或者校验输入的邮箱格式是否正确。借助update（Vue2）和updated（Vue3）钩子函数，我们可以轻松实现这类实时校验功能。

在Vue2中的实现：

Vue.directive('numberOnly', {
  update: function (el, binding) {
    // 监听输入事件
    el.addEventListener('input', function (e) {
      // 只允许输入数字和小数点
      e.target.value = e.target.value.replace(/[^\d.]/g, '');
      // 限制只能输入一个小数点
      e.target.value = e.target.value.replace(/(\..*)\./g, '$1');
    });
  }
});

在模板中的使用：

<template>
  <div>
    <input v - numberOnly v - model="inputNumber" placeholder="请输入数字">
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputNumber: ''
    };
  }
};
</script>

在Vue3中的实现：

import { createApp } from 'vue';
const app = createApp({});
app.directive('numberOnly', {
  updated: function (el, binding) {
    // 监听输入事件
    el.addEventListener('input', function (e) {
      // 只允许输入数字和小数点
      e.target.value = e.target.value.replace(/[^\d.]/g, '');
      // 限制只能输入一个小数点
      e.target.value = e.target.value.replace(/(\..*)\./g, '$1');
    });
  }
});

在组件模板中的使用：

<template>
  <div>
    <input v - numberOnly v - model="inputNumber" placeholder="请输入数字">
  </div>
</template>
<script setup>
import { ref } from 'vue';
const inputNumber = ref('');
</script>

通过上述代码，当用户在输入框输入内容时，触发组件更新，numberOnly指令的update（Vue2）或updated（Vue3）钩子函数添加的输入事件监听器就会对输入内容进行实时校验，保证输入框中始终是符合要求的数字格式。

使用update和updated钩子函数的注意事项

性能问题

虽然update和updated钩子函数能实现很多强大的功能，但如果使用不当，可能会引发性能问题。比如在钩子函数中进行大量复杂的DOM操作或者频繁的计算，会影响组件的更新效率。因为这两个钩子函数在组件更新时会被频繁调用，所以要尽量保证钩子函数内的代码简洁高效，避免不必要的重复操作。

避免无限循环

在钩子函数中修改组件数据时要格外小心，否则很容易造成无限循环更新。例如，在update或updated钩子函数中修改了指令绑定的值，而这个值的变化又会再次触发组件更新和钩子函数调用，就会陷入死循环。所以在操作数据时，一定要明确数据的流向和更新逻辑，确保不会出现这种情况 。

指令与组件的交互

在使用instance参数（Vue3）与组件进行交互时，要注意访问权限和数据一致性。不要随意修改组件实例中不应该被指令修改的数据，以免造成数据混乱。同时，在通过指令更新组件数据后，要确保组件的视图能正确响应变化，必要时可以结合nextTick方法来处理异步更新的问题。

总结

Vue2的update钩子函数和Vue3的updated钩子函数，都是自定义指令在组件更新过程中的得力助手。通过对它们触发时机、参数的理解，以及在不同应用场景中的实战，我们能更好地利用自定义指令完成一些复杂的功能需求。无论是实时数据同步展示、动态样式更新，还是输入框实时校验等，这些钩子函数都能发挥重要作用。

但在使用过程中，也要注意性能问题、避免无限循环以及处理好指令与组件的交互。希望通过本文的介绍，大家能对update和updated钩子函数有更深入的认识，在今后的Vue项目开发中，更熟练地运用它们提升开发效率和用户体验。如果你在实际使用中还有其他有趣的应用场景或遇到的问题，欢迎在评论区留言交流，咱们一起把Vue自定义指令玩出更多花样！