nuxt 组件：计算与数据

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在函数中使用，应该在 incomputed还是 in data？

Answer 1

computed和之间的区别data不是反应性。两者都是完全响应式的，如此处所示。两者之间的真正区别本质上是这样的：

• data由属性组成
• computed由吸气剂组成。

它们的用途截然不同，但共同为您提供了一些强大的数据操作工具。

例如：

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)
    }
  }
}

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

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

所以总结来说，data就是用来存储数据的，computed用来根据数据计算出新的结果，而不需要改变原来的状态。

现在谈谈你的观点：

如果数据是 100% 静态的，那为什么要把它变成一个函数呢？

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

如果我想在函数中包含 process.env，它应该在计算中还是在数据中？

您可以在 或 中访问computedprocess.env data。一般来说，如果您可以使用 访问 Nuxt 实例this，那么您也有可能可以访问这些process.env属性。