面试题：Vue中v - bind的对象语法及动态属性绑定

Question

请描述Vue中v - bind的对象语法，并举例说明如何使用对象语法动态绑定多个CSS类名和HTML属性。另外，阐述在数据变化时，这种动态绑定是如何响应式更新的。

Answer 1

v - bind的对象语法描述

在Vue中，v - bind的对象语法允许我们通过一个对象来动态地绑定多个属性。对象的键是要绑定的属性名，值是一个表达式，该表达式会根据Vue实例的数据进行计算，从而决定属性的值。

动态绑定多个CSS类名示例

假设我们有一个Vue实例，模板如下：

<template>
  <div v - bind:class="{ active: isActive, 'text - red': hasError }">
    这是一个示例div
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    };
  }
};
</script>

在上述代码中，v - bind:class使用对象语法，active类会在isActive为true时添加到div元素上，text - red类会在hasError为true时添加。

动态绑定多个HTML属性示例

<template>
  <img v - bind="{ src: imageSrc, alt: imageAlt, title: imageTitle }" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg',
      imageAlt: '示例图片',
      imageTitle: '这是一张示例图片'
    };
  }
};
</script>

这里v - bind使用对象语法，同时绑定了src、alt和title属性，属性值都来自Vue实例的数据。

数据变化时的响应式更新

Vue.js使用数据劫持（通过Object.defineProperty或Proxy）和发布 - 订阅模式来实现响应式。当数据发生变化时，Vue会检测到数据的变动，重新计算v - bind对象语法中表达式的值。例如，当isActive或hasError的值改变时，Vue会重新计算v - bind:class对象语法中的表达式，根据新的值决定是否添加或移除相应的CSS类。同样，当imageSrc、imageAlt或imageTitle的数据变化时，v - bind对象语法会重新计算，从而更新img元素的相应属性，实现页面的响应式更新。