Question

在我的nuxt组件中，我无法理解computed和data之间的区别。我得到了data和asyncData之间的区别，但是与这两个属性无关。

<template>
  {{computedMessage}}
  {{dataMessage}}
</template>
<script>
  export default {
    computed: {
      computedMessage(){
        return this.$store.state.whatever;
      }
    },
    data() {
      return {
        dataMessage: "Hi there"
      }
    }
  }
</script>

如果data是100％静态的，那么为什么要使其成为函数？
如果我想在函数中使用process.env，应该在computed还是data中？

Answer 1

computed和data之间的区别是不是反应性。两者都是完全反应的，如here所示。两者之间的真正区别实质上是：

data由properties
computed由getters组成。

它们的用途截然不同，但是一起为您提供了一些强大的数据处理工具。

例如：

export default {
  mounted() {
    console.log(this.adults)
  }
  data() {
    return {
      users: [
        { name: 'Jack', age: 12 },
        { name: 'Jill', age: 53 },
        { name: 'Smith', age: 29 },
        { name: 'Matt', age: 18 }
      ]
    }
  },
  computed: {
    adults() {
      return this.users.filter(user => user.age >= 18)
    }
  }
}

此示例将从this.adults返回3个用户：Jill，Smith和Matt。如果没有computed属性，则需要调用method进行计算，并且每次需要再次访问该数据时都需要重新调用它。

使用computed属性的最大好处是它们的结果为cached，类似于Vuex getters。当处理更大的数据集时，这显然可以带来巨大的好处。

因此，总而言之，data用于存储数据，computed用于基于数据计算新结果，而无需更改原始状态。

现在，您的意思了：

如果数据是100％静态的，那么为什么要使其成为函数？

这是因为Vue在同一组件的实例之间共享对其所有属性的引用，包括data。因此，我们声明一个函数，使其在每次实例化时都返回一个新版本，而不是声明一个普通的data对象。

如果我要在该函数中使用process.env，应在计算中还是在数据中？

您可以在computed或data中访问process.env。通常，如果您可以使用this访问Nuxt实例，那么很可能还可以访问process.env属性。

Answer 2

data和computed之间的区别是计算的是反应性的，数据是静态的。因此，如果要使用自动更新的数据，则必须使用computed。

例如，

computed通常在您必须等待数据（例如来自REST api）时使用，但又不想阻塞UI。因此，您分配了一个computed变量，并在数据到达时更新了UI的一部分。

要了解为什么data必须是一个函数，您应该看看this。

nuxt组件：计算与数据

2 个答案: