从多个方面详解Vuecomputed

一、VueComputed和Methods的区别

在Vue中，我们可以定义methods和computed。那么这两者有什么区别呢？简单来说，methods是一个方法，它可以接受参数并返回一个结果。而computed则是依赖于响应式数据的属性，也就是对象属性。

我们可以这样理解：methods返回的是一个值，每次调用它的时候都会重新执行方法；而computed是一种响应式的计算属性，只要依赖数据发生变化，computed会自动重新计算结果。而如果依赖数据没有变化，那么computed会直接从缓存中返回之前计算的结果，这也就是computed的缓存机制。

举个例子，比如我们需要计算一个人的BMI指数，根据公式，BMI指数=体重（kg）/身高²（m²）。

// 方法中计算BMI指数
methods: {
  getBMI(weight, height) {
    return weight / (height * height)
  }
}

// Computed中计算BMI指数
computed: {
  bmi() {
    return this.weight / (this.height * this.height)
  }
}

我们可以发现使用computed的代码更加简洁，并且每次只要体重或身高数据有变化，就能自动重新计算BMI指数。

二、VueComputed缓存机制有什么用

在上面的例子中，我们已经提到了VueComputed的缓存机制，也就是如果依赖数据没有变化，那么computed会直接从缓存中返回之前计算的结果。VueComputed作为响应式的计算属性，这个缓存机制可以提高性能，防止无意义的重复计算。

除此之外，VueComputed还允许我们实时监控数据的变化，并及时传递新的变化，从而可以触发下游的事件、操作或视图的更新。正因为VueComputed具有缓存、响应式、自动监控等多个特性，我们才会经常使用Computed。

三、VueComputed传参

在某些场合下，我们需要在计算属性中使用参数。VueComputed虽然和VueMethods不同，但Actually VueComputed也是可以使用形参的，只不过比methods有些不同。

首先，我们要知道，computed只能传递到组件中定义的data属性和computed属性中已存在的state属性。其次，我们可以通过在计算属性函数定义时传递参数来实现传参。

computed: {
  animalSound() {
    return function(animal) {
      switch (animal) {
        case 'dog':
          return 'Woof!'
        case 'cat':
          return 'Meow!'
        default:
          return '...'
      }
    }
  }
}

// 使用
{{ animalSound('dog') }} // 输出 Woof!

需要注意的是，上述例子中，animalSound是一个函数，需要在组件内使用aninalSound()调用函数并传递参数。这里只列举了一种实现方式，大家可以通过类似的方式在VueComputed中传递参数。

四、VueComputed Data选取

在VueComputed中，我们通常可以通过data属性中的值来计算结果，但是在实际开发中，常常会存在一些data值需要被filter过滤后才能使用，此时我们可以将其放在computed属性中，以便后续使用。

data() {
  return {
    items: [
      { title: 'Vue', done: true },
      { title: 'React', done: false },
      { title: 'Angular', done: true },
    ]
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => !item.done)
  },
  count() {
    return this.filteredItems.length
  }
}

在上面的代码中，我们首先定义了一个data属性items，这个属性是一个列表，该列表中的每一项有一个title和一个done属性。之后我们将items列表过滤出未完成的项目列表，并将这个列表放在了computed属性filteredItems中，这个列表中的每一项都不包含done为true的数据。最后我们想计算这个过滤后的列表的数量，我们将这个值放在了computed属性count中。这意味着每当数据变化，我们就可以重新计算已过滤的列表和它的长度，而不需要重复使用过滤数据的逻辑。

五、VueComputed和Watch

Vue中，除了computed之外，还有watch。它们都是用来监测数据变化的，但是它们有着本质的不同。

VueComputed是一个计算属性，它的值依赖于其他响应式数据的值，并根据这些值进行更复杂的计算结果。它是由多个已有响应式成分输出的新计算成分。Computed不仅用于前端界面的显示，而且还用于依赖于这些输出的其他操作。Computed输出结果基于数据响应式，因此它具有响应式、缓存的优势。

而Watch则是一个观察者，用于监测数据变化后执行相应操作。它只是简单的响应state对象的变化。当state对象变化时，watch就会自动执行绑定的方法。Watch虽然可以监测到数据变化并执行相应操作，但是需要手动进行内部处理，它不具备computed自动触发计算、缓存的优势。

data() {
  return {
    firstName: 'Steve',
    lastName: 'Jobs',
    fullName: ''
  }
},
watch: {
  // 监听firstName、lastName的变化
  firstName(val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName(val) {
    this.fullName = this.firstName + ' ' + val
  }
}

computed: {
  // fullName 写作计算属性
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

当firstName或者lastName的值被改变时，computed的函数会自动重新计算，同时也会自动触发watch的方法。在上面的代码中，使用computed可以让代码更简洁、易读、方便维护。

总结

综上所述，VueComputed是Vue.js提供的一个计算属性，在处理状态数据时非常方便。VueComputed具有缓存、自动依赖性、自动触发更新等特点，能够高效地提高应用程序的性能。 Computed 和 Watch 都是重要的Vue工具，各自有其应用场景。正确使用它们可以让代码更加清晰易懂，同时能够提升开发效率。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/258648.html