面试题：Vue中Fragment支持多根节点的组件在数据绑定上的特点

数据绑定差异

单根节点组件：在单根节点的Vue组件中，数据绑定相对简单直接。所有的模板数据绑定都围绕着这一个根节点进行。例如，假设有一个单根节点组件SingleRoot.vue：

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

这里v-model指令在input元素上双向绑定到组件的message数据属性，数据的变化在input和p标签中都能即时体现，因为它们都在同一个根节点div下。 2. 多根节点组件（使用Fragment）：在Vue 3中，使用Fragment支持多根节点组件时，数据绑定原则上没有本质区别，但需要注意指令的应用位置。由于没有单一的根节点，指令需要直接应用到相关元素上。例如，一个多根节点组件MultiRoot.vue：

<template>
  <section>
    <input v-model="message" />
  </section>
  <article>
    <p>{{ message }}</p>
  </article>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

这里虽然没有单一根节点，但v-model依然可以正确双向绑定到message数据属性，message的变化同样能在input和p标签中即时体现。

双向数据绑定在多根节点组件中的实现方式示例

基本表单双向绑定：

<template>
  <header>
    <input v-model="user.name" placeholder="Enter name" />
  </header>
  <main>
    <p>Name: {{ user.name }}</p>
  </main>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: ''
      }
    }
  }
}
</script>

在这个多根节点组件中，input元素通过v-model双向绑定到user.name数据属性，在main部分展示user.name的值，实现双向数据绑定。 2. 使用自定义组件实现双向绑定：假设我们有一个自定义组件CustomInput.vue用于输入用户名：

<template>
  <input :value="value" @input="$emit('update:value', $event.target.value)" />
</template>

<script>
export default {
  props: ['value']
}
</script>

在多根节点组件App.vue中使用它：

<template>
  <section>
    <CustomInput v-model="user.name" />
  </section>
  <article>
    <p>Name: {{ user.name }}</p>
  </article>
</template>

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      user: {
        name: ''
      }
    }
  }
}
</script>

这里通过v-model在多根节点组件中实现了自定义组件的双向数据绑定，在section中的CustomInput输入值会更新article中展示的user.name的值。

星途面试题库

面试题：Vue中Fragment支持多根节点的组件在数据绑定上的特点

知识考点

面试题答案

数据绑定差异

双向数据绑定在多根节点组件中的实现方式示例