Question

我有这个简单的vue单个文件组件

<template>
  <v-layout>
    <v-flex xs12 sm6 offset-sm3>
        <v-card v-bind:color="color" class="white--text">
          <v-card-title primary-title>
            <div>
              <h3 class="headline mb-0">Kangaroo Valley Safari</h3>
              <div>{{card_text}}</div>
            </div>
          </v-card-title>
        </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
import MessageCard from '../components/MessageCard.vue';
const colors = [
  'red',
  'pink',
  'purple',
  'indigo',
  'green'
];

export default {
  data () {
    return {
      card_text: 'Lorem ipsum dolor sit amet, brute iriure accusata ne mea. Eos suavitate referrentur ad, te duo agam libris qualisque, utroque quaestio accommodare no qui.'
    }
  },
  computed: {
    color: function () {
      const length = colors.length;
      return colors[Math.round(-0.5 + Math.random() * (length + 1))] + ' darken-3';
    }
  },
  components: {
    MessageCard
  }
}
</script>

问题在于，通过服务器端渲染，我正在计算color中的v-card作为样式，但是当客户端水化开始时，calculated属性会重新计算，这会更改样式并导致重新渲染。 / p>

当然，我可以修复fix标签，但是我很好奇还有其他方法可以使其正常工作。

Answer 1

在客户端水合作用期间，始终会重新评估计算的属性。由于Vue.js期望计算的属性为idempotent，所以通常不希望在计算的结果中传递副作用（例如Math.random()）。因此，通常您会在创建时立即计算一次该随机值，并将其存储为data。但是，在SSR和水合之间也不会保留组件的data。

因此，您可以通过在Vuex存储区中存储随机值来解决此问题。这样就有可能restore the state在客户端中的服务器上形成商店。

服务器渲染后，Vue.js在客户端上重新计算计算的属性

1 个答案: