vue的computed是什么时候执行的

Vue的computed属性在以下情况下执行：1、初次渲染时，2、依赖的响应式数据变化时。 Vue.js中的计算属性（computed）是一种基于其依赖进行缓存的属性，只有当其依赖的响应式数据发生变化时，它才会重新计算。这种特性使得计算属性在性能优化上比方法（methods）更有效，因为计算属性的结果会被缓存，只有在依赖的响应式数据变化时才会重新计算，而方法在每次调用时都会执行函数。

一、初次渲染时

在Vue实例创建并进行初次渲染时，所有的计算属性都会被求值。这是因为在初次渲染时，Vue需要知道每个计算属性的初始值，以便正确地在模板中使用它们。此时，计算属性的getter函数会被调用，计算属性的值会被缓存下来。

示例：

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      console.log('computed fullName');
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

在上面的例子中，fullName计算属性会在初次渲染时被求值，并且会输出computed fullName到控制台。

二、依赖的响应式数据变化时

计算属性的第二个执行时机是当其依赖的响应式数据发生变化时。Vue会追踪每个计算属性的依赖，当依赖项发生变化时，计算属性会被重新计算，并且其结果会被更新。

示例：

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      console.log('computed fullName');
      return `${this.firstName} ${this.lastName}`;
    }
  },
  methods: {
    changeName() {
      this.firstName = 'Jane';
    }
  }
});

在上面的例子中，当changeName方法被调用时，firstName的值会被改变，导致fullName计算属性重新计算，并且会再次输出computed fullName到控制台。

三、性能优化

计算属性的缓存机制是其性能优化的重要方面。与方法不同，计算属性只有在其依赖发生变化时才会重新计算，这可以避免不必要的计算开销。

对比：

方法：

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  methods: {
    fullName() {
      console.log('method fullName');
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

每次调用fullName方法时，都会执行计算，即使依赖的数据没有变化。

计算属性：

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      console.log('computed fullName');
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

计算属性fullName只有在firstName或lastName变化时才会重新计算。

四、使用场景

计算属性在以下场景中特别有用：

依赖多个响应式数据的复杂计算： 当一个属性需要依赖多个数据进行计算时，使用计算属性可以确保计算结果的准确性和性能优化。
从多个数据源派生出新的数据： 计算属性可以将多个数据源组合成一个新的属性，方便模板使用。
需要缓存的复杂计算： 对于计算开销较大的属性，使用计算属性可以有效减少不必要的重新计算。

五、实例说明

以下是一个更复杂的例子，展示了计算属性的实际应用：

示例：

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'item1', price: 10, quantity: 2 },
      { name: 'item2', price: 20, quantity: 1 },
      { name: 'item3', price: 15, quantity: 3 }
    ]
  },
  computed: {
    totalPrice() {
      return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
    }
  }
});

在这个例子中，totalPrice计算属性会计算购物车中所有商品的总价，并且只有在items数组中的数据发生变化时才会重新计算。

六、注意事项

避免在计算属性中进行异步操作： 计算属性应该是同步的，因为它们的结果需要立即可用。如果需要进行异步操作，应该使用方法或watchers。
不要直接修改计算属性的值： 计算属性应该是从其他数据派生出来的，不能直接修改它们的值。尝试修改计算属性会导致错误。

总结起来，Vue的计算属性主要在初次渲染和依赖的响应式数据变化时执行，并且通过缓存机制优化了性能。使用计算属性可以简化复杂的逻辑计算，并确保结果的准确性和高效性。为了更好地利用计算属性，开发者应该理解其执行时机，并合理设计依赖关系。