面试题：Vue中复杂表单组件双向绑定原理及案例实现

Question

在Vue表单绑定中，对于复杂表单组件（如包含多个子组件且存在联动关系的表单），请阐述双向绑定的原理。并举例说明如何实现一个具有省市联动的表单组件，省和市的数据从接口获取，要求给出关键代码片段及思路。

Answer 1

双向绑定原理

1. Vue的响应式系统：Vue通过Object.defineProperty()方法对数据进行劫持，将数据的读写转化为getter和setter函数。当数据发生变化时，setter会触发依赖收集和派发更新。
2. 指令系统：在表单绑定中，v-model指令是双向绑定的关键。它会根据表单元素的类型（如input、select等），在表单元素的input或change事件触发时，更新绑定的数据；同时，当数据变化时，通过getter获取新数据并更新表单元素的值。

省市联动表单组件实现思路

1. 获取数据：通过axios等HTTP库从接口获取省和市的数据。
2. 数据结构：省数据是一个数组，每个省对象包含省ID和省名称；市数据也是数组，每个市对象包含市ID、市名称以及所属省ID。
3. 双向绑定：使用v-model实现省和市选择的双向绑定。
4. 联动逻辑：当省选择发生变化时，根据所选省的ID过滤出对应的市数据。

关键代码片段

<template>
  <div>
    <select v-model="selectedProvince">
      <option v-for="province in provinces" :key="province.id">{{ province.name }}</option>
    </select>
    <select v-model="selectedCity">
      <option v-for="city in cities" :key="city.id">{{ city.name }}</option>
    </select>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      provinces: [],
      cities: [],
      selectedProvince: null,
      selectedCity: null
    };
  },
  mounted() {
    this.fetchProvinces();
  },
  methods: {
    fetchProvinces() {
      axios.get('/api/provinces')
      .then(response => {
          this.provinces = response.data;
          if (this.provinces.length > 0) {
            this.selectedProvince = this.provinces[0].id;
            this.fetchCities();
          }
        });
    },
    fetchCities() {
      axios.get(`/api/cities?provinceId=${this.selectedProvince}`)
      .then(response => {
          this.cities = response.data;
          if (this.cities.length > 0) {
            this.selectedCity = this.cities[0].id;
          }
        });
    }
  },
  watch: {
    selectedProvince() {
      this.fetchCities();
    }
  }
};
</script>