vue-component - nuxt 组件 : computed vs data

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是 不是 react 性。两者都是完全 react 性的，如 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 个用户:吉尔、史密斯和马特。没有 computed属性(property)，您需要调用 method要计算它，并且每次需要再次访问该数据时都需要重新调用它。

使用 computed 有什么好处属性是他们的结果是 cached , 类似于 Vuex getters .在处理更大的数据集时，这显然会带来一些巨大的好处。

总之， data用于存储数据， computed用于根据数据计算新的结果，而无需改变原始状态。

所以现在谈谈你的观点:

If data is 100% static, then why make it a function?

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

If I want to have process.env in the function, should it be in computed or in data?

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