Question

我正在通过计算函数在data属性中设置一个数组，并且该数组正在运行。但是我想知道如果我什么地方都不打电话怎么办？如果我尝试在函数中添加console.log，它不会打印任何内容，但仍在设置数据，那怎么可能？

我的数据：

 data() {
    return {
      projects: []
    };
  },

我的计算值：

computed: {
  loadedProjects() {
    console.log("Hello there")
    this.projects = this.$store.getters.loadedProjects
   }
},

我希望它不会运行，因为我没有打电话，并且如果它正在运行（我不知道为什么），请在设置数据之前打印console.log。有什么澄清吗？谢谢：）

Answer 1

您正在将计算道具与方法混淆。如果您希望使用像上面这样的方法来设置vue实例的数据值，则应该使用一种方法，而不是计算的prop：

 data() {
    return {
      projects: []
    };
  },
 methods: {
   loadProjects() {
     console.log("Hello there")
     this.projects = this.$store.getters.loadedProjects
   }
 }

这将获得this.$store.getters.loadedProjects 一次的值，并将其分配给您的本地项目值。现在，由于您正在使用Vuex，您可能希望本地引用与您对商店价值所做的更新保持同步。这是计算道具派上用场的地方。实际上，您根本不需要数据中的projects。您只需要计算的道具：

computed: {
  projects() {
    return this.$store.getters.loadedProjects
   }
},

现在，只要商店更新，vue就会更新您对项目的本地引用。然后，您可以像在模板中使用常规值一样使用它。例如

<template>
  <div v-for='item in projects' :key='item.uuid'>
    {{item.name}}
  </div>
</template>

避免在计算属性中产生副作用，例如直接分配值时，计算值应始终自己返回值。这可能是对现有数据应用了过滤器，例如

computed: {
  completedProjects() {
    return this.$store.getters.loadedProjects.filter(x => x.projectCompleted)
  },
  projectIds() {
    return this.$store.getters.loadedProjects.map(x => x.uuid)
  }
}

您明白了。有关将vuex状态带入组件的最佳做法的更多信息，请点击此处：https://vuex.vuejs.org/guide/state.html

计算道具文档： https://vuejs.org/v2/guide/computed.html

Answer 2

您应该检查有关计算属性和方法的Vue文档并且不应该在计算属性getter中运行方法 https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

我们可以定义与方法相同的功能，而不是计算属性。对于最终结果，这两种方法确实完全相同。但是，不同之处在于，已计算的属性基于其反应性依赖关系进行缓存。计算属性只有在其某些反应相关性已更改时才会重新评估。

计算函数运行而无需调用它

2 个答案: