vue计算属性在什么时候执行

Vue计算属性在以下几种情况下会执行：

1. 初始化时执行：在Vue实例创建时，计算属性会立即执行一次，用于获取初始的计算值。

2. 计算属性所依赖的响应式数据发生变化时执行：当计算属性依赖的响应式数据发生变化时，计算属性会重新执行，获取最新的计算值。

3. 计算属性被访问时执行：当计算属性被访问时，会触发计算属性的执行，用于获取最新的计算值。

需要注意的是，计算属性会对依赖的数据进行缓存。只有在计算属性依赖的响应式数据发生变化时，计算属性才会重新执行。如果计算属性的依赖数据没有发生变化，再次访问计算属性时，会直接返回缓存的计算值，而不会重新执行计算逻辑。

这种缓存机制可以提高计算属性的性能，避免不必要的计算开销。但是，如果需要在每次访问计算属性时都执行计算逻辑，而不使用缓存的计算值，可以使用Vue中的方法computed属性的参数写一个对应的方法，每次访问该方法时，都会执行计算逻辑，不会使用缓存的计算值。

Vue的计算属性会在以下情况下执行：

1. 初始化时：在Vue实例创建时，计算属性会在初始化阶段执行一次。这意味着计算属性会在组件首次渲染之前执行。

2. 依赖发生变化时：计算属性会根据它所依赖的响应式数据发生变化时，进行重新计算。当依赖的响应式数据发生变化时，计算属性会重新执行计算函数，然后将结果缓存起来。

3. 计算属性被获取时：如果计算属性在模板中被使用，每次获取计算属性的值时，会执行计算属性的计算函数，然后返回计算结果。这意味着计算属性的值是惰性求值的，只有在用到时才会计算。

4. 计算属性的依赖改变时，立即执行getter函数，重新计算计算属性的值。这是为了保证计算属性的值是最新的。

5. 当计算属性依赖的响应式数据被销毁时，计算属性会自动停止更新。这是Vue的响应式系统自动处理的，我们不需要关心。

需要注意的是，计算属性会缓存计算结果，只有当计算属性的依赖发生变化时，计算属性才会重新计算。这样可以避免不必要的计算，提高性能。如果想要强制重新计算计算属性的值，可以使用watch来监听依赖的响应式数据并在回调函数中对计算属性进行操作。

Vue计算属性是基于其依赖中响应式数据的值进行缓存的。当依赖的数据发生变化时，计算属性会重新计算，直到依赖的数据不再变化。计算属性的执行时机可以分为两个阶段。

1. 在模板渲染阶段执行：

在模板中使用计算属性时，Vue会自动将计算属性添加为模板中的依赖项。当依赖的数据发生变化时，计算属性会被重新计算并更新到模板中。这个过程是在模板渲染阶段进行的。

2. 在依赖的数据变化时执行：

除了在模板渲染阶段执行外，计算属性也可以在依赖的数据发生变化时手动触发执行。Vue提供了一个watch选项用于监听数据变化，当被监听的数据变化时，可以触发计算属性的执行。

以下是计算属性的执行流程以及具体操作：

1. 定义计算属性：

在Vue组件的computed选项中定义计算属性。

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

2. 计算属性的执行：

计算属性的执行分为两种情况：

• 在模板渲染阶段执行：

  当模板中使用计算属性时，计算属性会被添加为模板的依赖项。当依赖项的值发生变化时，计算属性会被重新计算并更新到模板中。

• 在数据变化时手动触发执行：

  可以使用Vue提供的watch选项监听数据的变化，当被监听的数据变化时，可以手动触发计算属性的执行。

watch: {
  firstName: function(val) {
    // firstName发生变化时，手动触发计算属性的执行
    this.fullName;
  }
}

总结：

计算属性的执行时机主要是在模板渲染阶段执行，当依赖的数据发生变化时会重新计算并更新到模板中。此外，也可以通过监听数据的变化来手动触发计算属性的执行。通过计算属性的缓存特性，可以提高性能，避免不必要的计算。