计算函数运行而不调用它答案

【问题标题】：Computed function running without to call it计算函数运行而不调用它
【发布时间】：2019-08-23 08:45:34
【问题描述】：

我正在通过计算函数在我的数据属性中设置一个数组，它正在工作。但我想知道如果我不在任何地方调用它怎么可能？如果我尝试在我的函数中添加一个 console.log，它不会打印任何内容，但它仍在设置我的数据，这怎么可能？

我的数据：

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

我的计算：

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

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

【问题讨论】：

标签： vue.js vuex nuxt.js

【解决方案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

【讨论】：

【解决方案2】：

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

我们可以将相同的函数定义为方法，而不是计算属性。对于最终结果，这两种方法确实完全相同。但是，不同之处在于，计算属性是根据它们的反应依赖来缓存的。计算属性仅在其某些反应性依赖项发生更改时才会重新评估。

【讨论】：