Vue2 与 Vue3 指令系统核心区别总结

1. 指令钩子函数变化

2. 钩子参数差异

3. 动态指令参数

4. 性能优化

5. 片段支持（多根节点）

6. 自定义指令注册

总结对比表

通过以上对比，Vue3 在指令系统的设计上实现了全面升级，覆盖开发效率、性能优化、类型安全等多个维度，为复杂场景提供了更强大的扩展能力。

//vue2
<template>
  <div class="layout">
    <div v-pin:[direction]="200">{{ direction }}</div>
    <button @click="direction = direction === 'top' ? 'left' : 'top'">
      {{ direction }}
    </button>
  </div>
</template>
<script>
export default {
  name: "App",
  directives: {
    pin: {
      bind(el, binding, vnode) {
        console.log("el", el);
        console.log("binding", binding);
        console.log("vnode", vnode);
        console.log("实例", vnode.context);
        el.style.position = "fixed";
        const direction = binding.arg;
        el.style[direction] = binding.value + "px";
      },
      update(el, binding) {
        console.log("update", el);
        console.log("binding", binding);
        const direction = binding.arg;
        el.style[direction] = binding.value + "px";
      },
    },
  },
  data() {
    return {
      direction: "top", // 定义动态参数
    };
  },
  methods: {},
};
</script>

// vue3
<template>
  <div>directive</div>
  <p v-highlight:[colorStyle]="'blue'">This sentence is important!</p>
  <button
    @click="colorStyle = colorStyle === 'color' ? 'backgroundColor' : 'color'"
  >
    {{ colorStyle }}
  </button>
</template>
<script setup lang="ts">
import { ref } from "vue";
const colorStyle = ref("color");
const vHighlight = {
  mounted: (el, binding, vnode) => {
    console.log("mounted", el);
    console.log("binding", binding);
    console.log("vnode", vnode);
    console.log("实例", binding.instance);
    el.style[binding.arg] = binding.value || "red";
  },
  updated: (el, binding) => {
    console.log("updated", el);
    console.log("binding", binding);
    el.style[binding.arg] = binding.value || "red";
  },
};
</script>