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

在Vue中，计算属性是一种特殊的属性，它的值是根据其他属性计算而来的。计算属性的执行时机与其依赖的属性有关。

当依赖的属性发生变化时，计算属性会被重新计算。Vue会根据依赖关系进行依赖追踪，当依赖的属性发生变化时，计算属性会被标记为“脏”，下一次访问计算属性时会重新计算并返回新的值。这种机制可以帮助我们避免手动去监听属性变化，并根据变化进行更新。

计算属性的执行时机有以下几种情况：

1. 页面初次渲染时：在页面初次渲染时，所有的计算属性会被执行一次，用于初始化相应的值。

2. 依赖的属性发生变化时：当依赖的属性发生变化时，与之相关的计算属性会被重新计算，返回新的值。

3. 访问计算属性时：当访问计算属性时，如果该计算属性被标记为“脏”，则会重新计算并返回新的值。

需要注意的是，计算属性的值会被缓存起来，只有当依赖的属性发生变化时，才会重新计算。这样可以提高计算属性的性能，避免不必要的计算。

总之，计算属性的执行时机是在页面初次渲染时和依赖的属性发生变化时。通过使用计算属性，我们可以方便地根据其他属性的变化来更新相应的值，提高代码的可读性和可维护性。

在Vue中，计算属性是一种特殊的属性，它的值是由相关的数据计算得出的。计算属性会根据它所依赖的数据的变化而自动重新计算，但它并不会立即执行，而是在被取值的时候才执行计算。

1. 首次取值：当计算属性第一次被取值时，计算属性的getter函数会被执行，计算属性的值会被计算出来并返回。后续再次取值时，Vue会判断计算属性是否依赖的数据发生了变化，如果变化了，就会重新执行计算属性的getter函数，如果没有变化，就会直接返回之前计算得到的值，而不会重新计算。

2. 依赖的数据发生变化：当计算属性所依赖的数据发生变化时，计算属性的getter函数会被重新执行，计算属性的值会被重新计算。Vue会自动追踪计算属性所依赖的数据，一旦依赖的数据变化，就会触发计算属性的重新计算。

3. 依赖的数据没有变化：如果计算属性所依赖的数据没有发生变化，那么再次取值时，Vue会直接返回之前计算得到的值，不会重新执行计算属性的getter函数。

4. 依赖的数据被修改：如果计算属性所依赖的数据被修改，那么在下一次取值时，计算属性的getter函数会被重新执行，计算属性的值会被重新计算。

5. 手动触发更新：除了自动地根据依赖数据的变化来更新计算属性，我们还可以通过手动调用计算属性的方法来强制更新计算属性的值。Vue提供了一个watch选项，可以监测计算属性所依赖的数据的变化，并在变化时触发回调函数来执行一些操作，通过在回调函数中手动调用计算属性的方法来实现对计算属性的更新。

在Vue中，计算属性是一个具有缓存功能的属性。它会根据它所依赖的属性的值来动态地计算出一个新的值，并在下次获取该属性时返回缓存的结果，只有当它依赖的属性发生变化时，计算属性才会重新计算。

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

1. 依赖的属性发生变化时：当计算属性依赖的属性发生改变时，计算属性会重新计算，并将新的结果缓存起来。这意味着，当依赖的属性被修改时，计算属性会立即更新并返回新的值。

2. 计算属性被获取时：当计算属性被获取时，如果它依赖的属性没有发生改变，那么计算属性会直接返回之前缓存的结果，避免重复计算。这样可以提高性能，避免不必要的计算。

可以通过以下代码示例来说明计算属性的执行时机：

// Vue实例
var vm = new Vue({
  data: {
    message: 'Hello Vue!',
  },
  computed: {
    reversedMessage: function() {
      console.log('计算属性被执行');
      return this.message.split('').reverse().join('');
    }
  },
  methods: {
    changeMessage: function() {
      console.log('依赖属性被修改');
      this.message = 'Vue Hello!';
    }
  }
})

// 获取计算属性的值
console.log(vm.reversedMessage); // 计算属性被执行，输出'!euV olleH'

// 修改依赖属性的值
vm.changeMessage(); // 依赖属性被修改

// 再次获取计算属性的值
console.log(vm.reversedMessage); // 计算属性被执行，输出'!olleH euV'

上述示例中，reversedMessage是一个计算属性，它依赖于message。当获取reversedMessage属性时，会触发计算属性的执行，并根据message的值来计算出一个新的值，然后返回结果。当修改message的值时，reversedMessage会立即更新并返回新的结果。

综上所述，计算属性在依赖的属性发生变化或被获取时执行，通过缓存结果来提高性能。