面试题：Vue 2与Vue 3模板语法中v - bind指令的差异

Question

请阐述在Vue 2和Vue 3中，v - bind指令在使用方式、功能特性以及语法糖等方面存在哪些差异？

Answer 1

使用方式差异

• Vue 2：常用于绑定元素的属性，例如 <img v-bind:src="imageSrc">，在模板中可直接使用对象语法来绑定多个属性，如 <div v-bind="{ id: boxId, class: boxClass }"></div>。
• Vue 3：基本使用方式与Vue 2类似，但在组件间传递props时更加灵活。对于动态props，Vue 3允许在组件上直接使用v-bind而无需显式指定属性名，如 <MyComponent v-bind="propsObject">，这里propsObject是包含多个props的对象。

功能特性差异

• Vue 2：支持普通的属性绑定，对于class和style的绑定有特殊处理，可使用数组或对象语法来动态切换类名和样式。
• Vue 3：在Vue 2基础上，对响应式系统进行了升级，使得v-bind指令在处理复杂数据结构的响应式更新时更高效。例如，当绑定的对象结构发生变化时，Vue 3能更精准地检测到变化并更新视图。此外，Vue 3对v-bind的透传特性做了改进，父组件通过v-bind传递给子组件的未声明props会自动透传到子组件的根元素上，除非子组件通过inheritAttrs: false进行阻止。

语法糖差异

• Vue 2：v-bind可简写为:，如 <a :href="link"> 等同于 <a v-bind:href="link">。
• Vue 3：继承了Vue 2的:语法糖，同时在一些场景下，语法糖的使用更加便捷。例如在组件透传props时，v-bind="$attrs"这种语法糖形式能更方便地将父组件所有未声明props传递给子组件。