vue计算属性什么时候渲染

Vue的计算属性在以下几种情况下会被重新渲染：

1. 初始化阶段：Vue组件被创建时，计算属性会立即计算一次，并将结果缓存起来。

2. 依赖发生变化：当计算属性的依赖发生变化时，计算属性会被重新计算并更新。

   • 当计算属性依赖的响应式数据发生变化时，计算属性会被重新计算。

   • 当计算属性依赖的计算属性发生变化时，计算属性会被重新计算。

   • 当计算属性依赖的方法发生变化时，计算属性会被重新计算。

3. 计算属性被访问：当计算属性被访问时，如果它的依赖没有发生变化，则会从缓存中取出结果；如果依赖发生了变化，则会重新计算并更新。

需要注意的是，计算属性是一种基于依赖关系的响应式属性，只有在相关的依赖发生变化时才会重新计算，否则会使用之前的缓存结果，这样可以提高性能。而且，计算属性是惰性求值的，只有在需要时才会计算，而不是每次重新渲染时都会计算。

总而言之，Vue的计算属性会在初始化阶段和依赖发生变化时进行重新渲染。通过使用计算属性，我们可以方便地实现复杂的逻辑，并且可以根据依赖的变化来实时更新计算结果。

Vue的计算属性会在其依赖的属性发生变化时进行重新计算和渲染。下面是计算属性渲染的几个时机：

1. 初始化渲染：在Vue实例创建时，计算属性会进行初始化渲染，将计算结果返回给模板进行渲染。

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

上述代码中，在初始化渲染过程中，sum计算属性会被计算并返回num1和num2的和。

2. 依赖属性变化时的渲染：当依赖属性发生改变时，计算属性会重新计算并更新其值，从而触发重新渲染。

<div id="app">
  <p>{{ sum }}</p>
</div>

new Vue({
  el: "#app",
  data: {
    num1: 1,
    num2: 2
  },
  computed: {
    sum: function() {
      return this.num1 + this.num2;
    }
  }
});

setTimeout(function() {
  app.num1 = 3;
}, 1000);

上述代码中，在1秒后将num1的值改为3，这个改变会触发计算属性sum的重新计算和更新，所以页面上显示的结果会从3变为5。

3. 计算属性直接被访问时的渲染：当计算属性直接被访问时，Vue会检测其依赖的属性，并将其依赖的属性加入到依赖追踪系统中，以便在属性改变时触发重新计算和渲染。

<div id="app">
  <p>{{ sum }}</p>
  <button @click="changeNum">Change Num</button>
</div>

new Vue({
  el: "#app",
  data: {
    num1: 1,
    num2: 2
  },
  computed: {
    sum: function() {
      return this.num1 + this.num2;
    }
  },
  methods: {
    changeNum: function() {
      this.num1 += 1;
    }
  }
});

上述代码中，点击"Change Num"按钮会执行changeNum方法，该方法会将num1的值加1。当计算属性sum被访问时，Vue会将num1加入到依赖追踪系统，并在num1改变时触发重新计算和渲染。

4. 计算属性依赖的属性发生改变时的渲染：如果计算属性依赖的属性发生改变，但计算属性本身的值没有改变，Vue不会触发重新计算和渲染。

<div id="app">
  <p>{{ sum }}</p>
  <button @click="changeNum1">Change Num1</button>
</div>

new Vue({
  el: "#app",
  data: {
    num1: 1,
    num2: 2
  },
  computed: {
    sum: function() {
      return this.num1 + this.num2;
    }
  },
  methods: {
    changeNum1: function() {
      this.num1 += 1;
      this.num1 -= 1;
    }
  }
});

上述代码中，点击"Change Num1"按钮会先将num1的值加1，再将其减1。这样虽然num1发生了改变，但计算属性sum的值仍然不变，所以不会触发重新计算和渲染。

5. 计算属性缓存机制：Vue对计算属性进行了缓存，当计算属性所依赖的属性没有变化时，获取计算属性的值会直接从缓存中读取，而不会重新计算。

<div id="app">
  <p>{{ sum }}</p>
  <button @click="changeNum1">Change Num1</button>
</div>

new Vue({
  el: "#app",
  data: {
    num1: 1,
    num2: 2
  },
  computed: {
    sum: function() {
      console.log("calculate sum");
      return this.num1 + this.num2;
    }
  },
  methods: {
    changeNum1: function() {
      this.num1 += 1;
    }
  }
});

上述代码中，在计算属性sum中添加了console.log("calculate sum")语句以用于观察计算属性的计算过程。在页面加载时和点击按钮改变num1时，可以观察到"calculate sum"只输出一次，这是因为计算属性sum对num1的依赖没有变化，所以结果从缓存中读取，不会重新计算。

Vue计算属性的渲染时机是在模板渲染时。当计算属性的依赖数据发生改变时，计算属性会立即重新计算，并且在下一次视图更新时，会直接使用缓存的计算结果，而不会再次执行计算函数。

具体而言，计算属性的渲染时机可以分为以下情况：

1. 初始化阶段：在Vue实例初始化时，计算属性会被计算一次，并且将结果进行缓存。之后在渲染过程中，如果没有相关依赖数据发生变化，会直接使用缓存结果进行渲染。

2. 依赖数据变化：当计算属性依赖的数据发生变化时，计算属性会被标记为“脏值”，在下一次页面更新时重新计算。这是因为Vue使用了响应式系统来追踪数据的变化，当依赖数据发生变化时，会通知相关的计算属性进行重新计算。

3. 计算属性被调用：当在模板中使用计算属性时，计算属性会被动态地计算，并且会返回计算结果供模板使用。此时，会检查计算属性的依赖数据是否发生变化，如果变化了，则会重新计算计算属性的值。

需要注意的是，计算属性的结果会被缓存，只有在相关的依赖数据发生变化时才会重新计算。而且，计算属性是基于它的依赖数据进行缓存的，只有依赖数据发生变化时，与该计算属性有关的视图才会重新渲染，否则会直接使用上一次的缓存结果。

总结起来，Vue计算属性的渲染时机是在模板渲染时，会在初始化阶段进行一次计算，并且在依赖数据发生变化时进行重新计算。计算属性的结果会被缓存，并且只有在相关依赖数据发生变化时才会重新计算。这样可以有效地提高性能并避免不必要的计算。