Vue的依赖列表是干什么的？底层原理是什么？

Vue的依赖列表是一个数组，用于存储当前组件中所有响应式数据所依赖的属性的getter函数。当响应式数据发生变化时，这些getter函数会被依次执行，从而触发组件重新渲染。

具体来说，当组件挂载时，Vue会在数据对象上使用Object.defineProperty()定义getter和setter，当数据被读取时，getter函数会被执行并将依赖的属性添加到依赖列表中。当数据发生变化时，Vue会遍历依赖列表并执行其中的getter函数，通知组件进行重新渲染。

例如，在以下组件中：

<template>
  <div>{{ firstName }} {{ lastName }}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    },
  },
};
</script>

在该组件中，fullName是一个计算属性，它依赖于firstName和lastName。当firstName或lastName发生变化时，fullName会重新计算并更新到模板中。Vue会将fullName的getter函数添加到该组件的依赖列表中，并在firstName或lastName发生变化时执行该getter函数。这样就实现了响应式更新的功能。

需要注意的是，当数据对象的属性被删除或添加时，需要使用Vue提供的特定方法，如Vue.set()和Vue.delete()，来触发响应式更新。这是因为在删除或添加属性时，无法使用Object.defineProperty()来监听变化。