面试题：Vue中计算属性在什么场景下会重新计算？

Question

请详细阐述Vue计算属性依赖的数据发生哪些变化时，计算属性会重新进行计算。

Answer 1

1. 直接依赖数据变化：
   • 当计算属性的函数中直接引用的数据发生变化时，计算属性会重新计算。例如，在一个Vue组件中有如下计算属性：

   data() {
       return {
           num1: 1,
           num2: 2
       };
   },
   computed: {
       sum() {
           return this.num1 + this.num2;
       }
   }
   

   这里sum计算属性依赖num1和num2，当num1或num2的值改变时，sum会重新计算。
2. 对象属性变化：
   • 如果计算属性依赖的是一个对象，当对象的属性值发生变化时，计算属性也会重新计算。

   data() {
       return {
           user: {
               name: 'John',
               age: 30
           }
       };
   },
   computed: {
       userInfo() {
           return `Name: ${this.user.name}, Age: ${this.user.age}`;
       }
   }
   

   当修改this.user.name或this.user.age时，userInfo计算属性会重新计算。不过需要注意，直接通过obj.newProp = 'new value'添加新属性，计算属性不会响应变化，需要使用Vue.set或this.$set方法添加属性，计算属性才会重新计算。
3. 数组元素变化：
   • 当计算属性依赖的数组的元素发生变化时，计算属性会重新计算。

   data() {
       return {
           numbers: [1, 2, 3]
       };
   },
   computed: {
       sumOfNumbers() {
           return this.numbers.reduce((acc, num) => acc + num, 0);
       }
   }
   

   如果通过数组的变异方法（如push、pop、splice等）改变数组内容，sumOfNumbers会重新计算。但是如果直接通过索引赋值（如this.numbers[0] = 10），计算属性不会响应变化，同样需要使用Vue.set或this.$set方法修改数组元素，计算属性才会重新计算。
4. 深层嵌套数据变化：
   • 对于多层嵌套的对象或数组，如果深层数据发生变化，计算属性也会重新计算，但前提是使用了Vue能追踪到变化的方式。例如对于嵌套对象：

   data() {
       return {
           complexObj: {
               subObj: {
                   value: 10
               }
           }
       };
   },
   computed: {
       complexValue() {
           return this.complexObj.subObj.value * 2;
       }
   }
   

   要使complexValue重新计算，不能直接this.complexObj.subObj.value = 20，而应该使用Vue.set(this.complexObj.subObj, 'value', 20)或this.$set(this.complexObj.subObj, 'value', 20)。对于嵌套数组同理。