MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue侦听器 多层级嵌套数据监听的最佳实践

2021-04-194.4k 阅读

Vue 侦听器基础回顾

在 Vue 开发中，侦听器（watchers）是一种强大的工具，用于响应数据的变化。通过watch选项，我们可以观察一个或多个数据属性的变化，并在其发生变化时执行相应的回调函数。

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

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
    }
  }
};
</script>

在上述示例中，当message数据属性发生变化时，watch中的回调函数就会被触发，打印出新旧值。这是最基本的侦听器使用场景，对于简单数据类型，这种方式非常直观和有效。

多层级嵌套数据监听的挑战

然而，当面对多层级嵌套的数据结构时，情况变得复杂起来。例如，考虑以下的数据结构：

data() {
  return {
    user: {
      profile: {
        name: 'John',
        age: 30,
        address: {
          city: 'New York',
          street: '123 Main St'
        }
      }
    }
  };
}

如果我们直接对user进行监听：

watch: {
  user(newValue, oldValue) {
    console.log('user 发生变化');
  }
}

此时，只有当user对象被整个替换时，侦听器才会触发。如果只是修改了user.profile.name，侦听器并不会感知到。这是因为 Vue 的响应式系统在初始化时，会对数据进行递归遍历并转换为 getter/setter 形式。对于嵌套较深的数据，直接监听外层对象无法及时捕获内层数据的变化。

深度监听

为了解决上述问题，Vue 提供了深度监听（deep watch）的功能。通过在watch选项中设置deep: true，我们可以实现对嵌套数据的深度监听。

watch: {
  user: {
    handler(newValue, oldValue) {
      console.log('user 及其嵌套属性发生变化');
    },
    deep: true
  }
}

这样，无论user对象内部的哪一层数据发生变化，handler回调函数都会被触发。但深度监听也有其代价，由于它需要递归遍历整个对象，性能开销较大。特别是在数据结构非常复杂且频繁变化的情况下，可能会影响应用的性能。

精确监听嵌套属性

有时候，我们并不需要对整个嵌套对象进行深度监听，而是只关注其中某一个特定的嵌套属性。例如，我们只关心user.profile.age的变化。

watch: {
  'user.profile.age': {
    handler(newValue, oldValue) {
      console.log(`年龄从 ${oldValue} 变为 ${newValue}`);
    },
    immediate: true // 立即触发一次，获取初始值
  }
}

在上述代码中，我们通过字符串路径的方式精确监听了user.profile.age。immediate: true表示在组件加载时，就立即触发一次回调函数，以便获取初始值。这种方式相对深度监听更加轻量级，只关注特定属性的变化，减少了不必要的性能开销。

数组嵌套在多层级数据中的监听

当多层级嵌套数据中包含数组时，情况又有所不同。例如：

data() {
  return {
    shoppingCart: {
      items: [
        { id: 1, name: '商品1', price: 100 },
        { id: 2, name: '商品2', price: 200 }
      ]
    }
  };
}

如果我们想监听shoppingCart.items数组中某个商品的价格变化，直接监听shoppingCart.items数组并设置deep: true是可以实现的，但不够精确。我们可以使用计算属性结合侦听器来实现更精确的监听。

computed: {
  itemPrices() {
    return this.shoppingCart.items.map(item => item.price);
  }
},
watch: {
  itemPrices: {
    handler(newPrices, oldPrices) {
      // 这里可以根据新旧价格数组进行更细粒度的操作
      console.log('商品价格发生变化');
    },
    deep: true
  }
}

在上述代码中，通过计算属性itemPrices获取商品价格数组，然后对这个计算属性进行监听。这样，当数组中任何一个商品的价格发生变化时，侦听器都会被触发，而且避免了对整个shoppingCart.items数组的深度监听带来的性能浪费。

使用 Vuex 处理多层级嵌套数据监听

在大型 Vue 项目中，通常会使用 Vuex 进行状态管理。Vuex 中的状态同样可能存在多层级嵌套的情况。例如：

// store.js
const store = new Vuex.Store({
  state: {
    user: {
      profile: {
        name: 'Alice',
        preferences: {
          theme: 'light',
          language: 'en'
        }
      }
    }
  },
  mutations: {
    updateUserPreference(state, { key, value }) {
      Vue.set(state.user.profile.preferences, key, value);
    }
  }
});

在组件中监听 Vuex 状态的变化：

<template>
  <div>
    <button @click="changeTheme">切换主题</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
  ...mapState(['user'])
  },
  watch: {
    user: {
      handler(newValue, oldValue) {
        console.log('Vuex 中 user 状态发生变化');
      },
      deep: true
    }
  },
  methods: {
    changeTheme() {
      this.$store.commit('updateUserPreference', {
        key: 'theme',
        value: this.user.profile.preferences.theme === 'light'? 'dark' : 'light'
      });
    }
  }
};
</script>

这里通过mapState辅助函数将 Vuex 中的user状态映射到组件的计算属性中，然后对这个计算属性进行深度监听。需要注意的是，在修改 Vuex 中的嵌套数据时，要使用Vue.set来确保 Vue 能够检测到变化。

动态添加和移除多层级嵌套数据监听

在某些情况下，我们可能需要动态地添加或移除对多层级嵌套数据的监听。例如，根据用户的操作来决定是否监听某个特定的嵌套属性。

<template>
  <div>
    <button @click="toggleWatch">切换监听</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        profile: {
          name: 'Bob',
          isActive: false
        }
      },
      watcher: null
    };
  },
  methods: {
    toggleWatch() {
      if (this.watcher) {
        this.$watchers['user.profile.isActive'].teardown();
        this.watcher = null;
      } else {
        this.watcher = this.$watch('user.profile.isActive', (newValue, oldValue) => {
          console.log(`isActive 从 ${oldValue} 变为 ${newValue}`);
        });
      }
    }
  }
};
</script>

在上述代码中，通过$watch方法动态地添加和移除对user.profile.isActive的监听。$watch方法返回一个取消监听的函数，我们可以通过调用这个函数来移除监听。这种方式在需要灵活控制监听行为的场景中非常有用。

多层级嵌套数据监听的性能优化

  1. 减少不必要的深度监听：尽量使用精确监听特定嵌套属性的方式，避免对整个多层级对象进行深度监听。只有在确实需要捕获所有嵌套属性变化时，才使用深度监听。
  2. 防抖和节流：如果监听器的回调函数执行的操作比较耗时，可以使用防抖（debounce）或节流（throttle）技术。例如，使用lodash库中的debounce和throttle函数。
import debounce from 'lodash/debounce';

export default {
  data() {
    return {
      user: {
        profile: {
          name: 'Charlie'
        }
      }
    };
  },
  watch: {
    'user.profile.name': {
      handler: debounce(function(newValue, oldValue) {
        // 这里执行比较耗时的操作，例如网络请求
        console.log(`名称从 ${oldValue} 变为 ${newValue}`);
      }, 300),
      immediate: true
    }
  }
};

在上述代码中，使用debounce函数对user.profile.name的变化进行防抖处理，只有在连续变化停止 300 毫秒后，才会执行回调函数，这样可以避免频繁触发不必要的操作。

  1. 使用计算属性缓存：如前面数组嵌套数据监听的例子中，通过计算属性缓存需要监听的数据，避免直接监听复杂的嵌套结构，从而提高性能。

不同 Vue 版本中多层级嵌套数据监听的差异

在 Vue 2.x 版本中，深度监听和精确监听嵌套属性的方式基本如前文所述。然而，在 Vue 3.x 版本中，由于其采用了 Proxy 替代了 Vue 2.x 中的 Object.defineProperty 来实现响应式系统，在多层级嵌套数据监听方面有一些细微的变化。

在 Vue 3 中，深度监听依然可以通过deep: true来实现，但由于 Proxy 的特性，对于嵌套对象和数组的变化检测更加精准和高效。例如，直接修改数组的长度在 Vue 2 中可能需要特殊处理才能被侦听器捕获，而在 Vue 3 中可以直接被监听到。

对于精确监听嵌套属性，在 Vue 3 中也可以使用字符串路径的方式，但同时也可以使用更简洁的方法。例如：

import { ref, watch } from 'vue';

const user = ref({
  profile: {
    age: 25
  }
});

watch(() => user.value.profile.age, (newValue, oldValue) => {
  console.log(`年龄从 ${oldValue} 变为 ${newValue}`);
});

这里通过watch函数的第一个参数传入一个返回需要监听属性的函数，这种方式更加灵活和直观，特别是在处理复杂的嵌套数据结构时。

结合 Typescript 进行多层级嵌套数据监听

当使用 Vue 结合 Typescript 开发时，在多层级嵌套数据监听方面需要注意类型定义。例如：

<template>
  <div>
    <input v-model="user.profile.name" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface Address {
  city: string;
  street: string;
}

interface Profile {
  name: string;
  age: number;
  address: Address;
}

interface User {
  profile: Profile;
}

export default defineComponent({
  data() {
    return {
      user: {
        profile: {
          name: 'David',
          age: 28,
          address: {
            city: 'Los Angeles',
            street: '456 Elm St'
          }
        }
      } as User
    };
  },
  watch: {
    'user.profile.name': {
      handler(newValue: string, oldValue: string) {
        console.log(`名称从 ${oldValue} 变为 ${newValue}`);
      },
      immediate: true
    }
  }
});
</script>

在上述代码中，通过定义接口来明确数据结构的类型，这样在watch回调函数中，参数的类型也能得到正确的推断，提高代码的可读性和可维护性。

跨组件多层级嵌套数据监听

在实际项目中，多层级嵌套数据可能分布在不同的组件中。例如，一个父组件包含一个多层级嵌套的数据对象，而子组件需要监听其中某个属性的变化。

<!-- Parent.vue -->
<template>
  <div>
    <Child :user="user" />
  </div>
</template>

<script>
import Child from './Child.vue';
export default {
  components: {
    Child
  },
  data() {
    return {
      user: {
        profile: {
          name: 'Eva',
          score: 80
        }
      }
    };
  }
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <p>子组件: 用户分数 {{ user.profile.score }}</p>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  watch: {
    'user.profile.score': {
      handler(newValue, oldValue) {
        console.log(`子组件监听到分数从 ${oldValue} 变为 ${newValue}`);
      },
      immediate: true
    }
  }
};
</script>

在上述代码中，父组件将user对象传递给子组件，子组件通过props接收并对其中的user.profile.score进行监听。这样就实现了跨组件的多层级嵌套数据监听。但这种方式在组件层级较深时，可能会变得繁琐。此时，可以考虑使用事件总线（event bus）或 Vuex 来实现更灵活的跨组件数据通信和监听。

多层级嵌套数据监听在复杂业务场景中的应用

以一个电商管理系统为例，假设系统中有一个订单数据结构，包含订单基本信息、客户信息以及订单项列表，而每个订单项又包含商品信息和数量等多层级嵌套数据。

data() {
  return {
    order: {
      orderId: '123456',
      customer: {
        name: 'Frank',
        email: 'frank@example.com'
      },
      items: [
        {
          product: {
            name: '商品A',
            price: 50
          },
          quantity: 2
        },
        {
          product: {
            name: '商品B',
            price: 80
          },
          quantity: 1
        }
      ]
    }
  };
}

在这个场景下，可能需要监听订单总价的变化（总价由订单项的价格和数量计算得出），以及客户信息中邮箱的变化（例如用于发送订单确认邮件）。

computed: {
  orderTotal() {
    return this.order.items.reduce((total, item) => {
      return total + item.product.price * item.quantity;
    }, 0);
  }
},
watch: {
  orderTotal(newValue, oldValue) {
    console.log(`订单总价从 ${oldValue} 变为 ${newValue}`);
  },
  'order.customer.email': {
    handler(newValue, oldValue) {
      console.log(`客户邮箱从 ${oldValue} 变为 ${newValue}`);
      // 这里可以触发发送邮件等业务逻辑
    },
    immediate: true
  }
}

通过这种方式，在复杂的业务场景中，利用多层级嵌套数据监听可以有效地响应数据变化，执行相应的业务逻辑。

多层级嵌套数据监听与组件生命周期的关系

在组件的生命周期中，多层级嵌套数据监听的时机和行为也会受到影响。例如，在组件创建阶段（created钩子函数），可以初始化监听。

<template>
  <div>
    <input v-model="user.profile.age" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        profile: {
          age: 35
        }
      }
    };
  },
  created() {
    this.$watch('user.profile.age', (newValue, oldValue) => {
      console.log(`年龄从 ${oldValue} 变为 ${newValue}`);
    });
  }
};
</script>

在上述代码中，在created钩子函数中通过$watch动态添加了对user.profile.age的监听。当组件销毁时（beforeDestroy钩子函数），如果之前动态添加了监听，需要手动移除监听以避免内存泄漏。

<template>
  <div>
    <button @click="toggleWatch">切换监听</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        profile: {
          isSubscribed: false
        }
      },
      watcher: null
    };
  },
  methods: {
    toggleWatch() {
      if (this.watcher) {
        this.watcher();
        this.watcher = null;
      } else {
        this.watcher = this.$watch('user.profile.isSubscribed', (newValue, oldValue) => {
          console.log(`订阅状态从 ${oldValue} 变为 ${newValue}`);
        });
      }
    }
  },
  beforeDestroy() {
    if (this.watcher) {
      this.watcher();
    }
  }
};
</script>

在beforeDestroy钩子函数中，检查并移除之前添加的监听，确保组件销毁时不会遗留无效的监听，保证应用的性能和稳定性。

多层级嵌套数据监听的测试

在对包含多层级嵌套数据监听的 Vue 组件进行测试时，需要确保监听器能够正确地响应数据变化。以 Jest 和 Vue Test Utils 为例：

<template>
  <div>
    <input v-model="user.profile.name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        profile: {
          name: 'Grace'
        }
      }
    };
  },
  watch: {
    'user.profile.name': {
      handler(newValue, oldValue) {
        this.$emit('name-changed', newValue, oldValue);
      },
      immediate: true
    }
  }
};
</script>

import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('should trigger watcher when name changes', () => {
    const wrapper = mount(MyComponent);
    const input = wrapper.find('input');
    const initialName = wrapper.vm.user.profile.name;
    input.setValue('New Name');
    expect(wrapper.emitted('name-changed')).toBeTruthy();
    const emittedArgs = wrapper.emitted('name-changed')[0];
    expect(emittedArgs[0]).toBe('New Name');
    expect(emittedArgs[1]).toBe(initialName);
  });
});

在上述测试代码中，通过mount函数挂载组件，模拟用户输入修改user.profile.name的值，然后检查name-changed事件是否被触发，并且验证事件传递的参数是否正确，以此来确保多层级嵌套数据监听的功能正常。

通过以上从基础回顾到各种复杂场景及优化、测试等方面的介绍，希望能帮助你全面掌握 Vue 中多层级嵌套数据监听的最佳实践，在实际项目开发中更加高效地处理相关业务需求。