Vue3相较于Vue2的变化：更丰富的内置指令

1. Vue3相较于Vue2的变化

Vue3作为前端框架的一次升级，相较于Vue2在性能优化、API设计、开发体验等方面都有所提升。除了改进原有特性之外，Vue3还新增了一些特性，其中比较重要的是丰富的内置指令。

2. 新增的内置指令

2.1 v-model指令

Vue2中的v-model指令存在一些使用上的瑕疵，如只适用于表单元素、针对自定义组件需要进行额外的适配等，Vue3中对这些问题做出了一些优化。

首先是v-model支持自定义组件的情况。在Vue2中，如果想要在自定义组件上使用v-model，需要通过prop和emit两个属性进行适配。而在Vue3中，可以通过在自定义组件中添加一个model选项，以达到v-model的效果：

// 在自定义组件的选项中添加 model 选项即可
app.component('MyComponent', {
  // new v-model API
  props: {
    modelValue: String,
    // !!! 注意名字后缀会被自动识别为事件，不要在 modelValue 名字后面添加 $ 前缀
    updateModelValue: Function
  },
  emits: ['update:modelValue'],
  template: `
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
  `
});

此外，v-model在Vue3中还可以在非表单元素上使用，甚至可以使用自定义的值的类型：

<!-- 自定义的实时类型转换 -->
app.directive('model', {
  created(el, binding) {
    if (!binding.modifiers.lazy) {
      el.addEventListener('input', () => {
        const selected = binding.value
          .split('.')
          .reduce((o, i) => o[i], el.$model);
        selected[binding.arg] = el.valueAsNumber || el.value;
      });
    } else {
      el.addEventListener('change', () => {
        const selected = binding.value
          .split('.')
          .reduce((o, i) => o[i], el.$model);
        selected[binding.arg] = el.valueAsNumber || el.value;
      });
    }
  }
});
// 使用自定义 model 指令
<template>
  <div>
    <div class="progress">
      <div class="progress-bar" role="progressbar"
           :rent="value.width"
           model="step1.width">
        {{ step1.width + '%' }}
      </div>
    </div>
    <input v-model.lazy="step1.width" type="range" name="width" id="width" min="0" max="100">
  </div>
</template>

2.2 v-bind指令

在Vue3中，v-bind指令也进行了一些改进，使得其具有更加灵活的应用场景。

首先是在绑定对象属性时的能力，Vue3中可以将一个对象不加限制地绑定到一个元素的多个属性上：

// Vue3
<template>
  <div :style="{color: color, fontSize: fontSize}">
    Color: {{ color }}, Font size: {{ fontSize }}
  </div>
</template>
// Vue2
<template>
  <div :style="{color: color} :font-size="fontSize">
    Color: {{ color }}, Font size: {{ fontSize }}
  </div>
</template>

同时，在Vue3中也增强了对class和style对象属性的支持，可以用在更多的场景中：

// Vue3
<template>
  <div :class="[{'text-right': isRightAligned, 'text-first': isFirstClass}]">
    {{ content }}
  </div>
</template>
// Vue2
<template>
  <div :class="{'text-right': isRightAligned, 'text-first': isFirstClass}">
    {{ content }}
  </div>
</template>

3. 总结

Vue3在内置指令方面进行了多次改进，使得开发者能够在开发过程中更加灵活地使用Vue的特性。尽管说v-model和v-bind两个指令在Vue2中已经非常出色，但是Vue3在这两个指令基础上进行了升级，让其应用范围更广泛、使用更加灵活方便，在Vue3中学习和使用内置指令将会更加愉快！