Vue中的methods属性和computed属性的区别

Posted 2023-03-29 conquer_galaxy

Vue 中的 methods 属性和 computed 属性都是用于组件中定义数据的属性。它们的区别在于，methods 属性用于定义一些计算属性，而 computed 属性则用于定义一些具有缓存特性的计算属性。

具体地说，methods 属性用于定义一些需要进行复杂计算的属性值，这些属性值不具备缓存特性，每次访问时都会重新计算。例如：

export default 
  data() 
    return 
      width: 100,
      height: 150
    
  ,
  methods: 
    getArea() 
      return this.width * this.height;
    
  

在此示例中，getArea() 方法用于计算组件的面积，其中 width 和 height 属性的值可能会随时改变。每次调用 getArea() 方法时都会重新计算面积，因此它不具备缓存特性。

相比之下，computed 属性用于定义一些具有缓存特性的计算属性，这些属性值只有在其依赖的数据发生改变时才会重新计算，并且可以通过缓存机制来提高性能。例如：

export default 
  data() 
    return 
      width: 100,
      height: 150
    
  ,
  computed: 
    area() 
      return this.width * this.height;
    
  

在此示例中，area 属性被定义为一个计算属性，它依赖于 width 和 height 属性的值。每次访问 area 属性时，只要 width 或 height 的值没有改变，就会从缓存中返回上一次计算的结果，而不必重新计算。这可以提高性能并减少不必要的计算。还需要注意的是，对于具有缓存特性的计算属性，不能使用函数方式进行调用，而应该直接通过属性名来访问其值，例如：this.area。

既然说直接用属性名来访问，那么有一个问题：computed属性中的函数能传参吗？

有办法实现：
 

export default 
  data() 
    return 
      width: 100,
      height: 150
    
  ,
  computed: 
    area() 
      return (factor) => this.width * this.height * factor;
    
  

 

在这个示例中，我们将 area 定义为一个函数，它接受一个 factor 参数，并返回计算结果。然后，在组件的模板中，可以使用 area(factor) 的方式来调用计算属性，并传递所需的参数值。例如：

<template>
  <div>
    Area with factor 2:  area(2) 
  </div>
</template>

这样，每次调用 area(2) 时，它会计算出基于当前的 width 和 height 属性值的面积，并乘以传入的 factor 值，最终返回结果。需要注意的是，由于计算属性是具有缓存特性的，因此只有当 width 或 height 的值发生改变时，才会重新计算该属性的值。

vue实例属性之methods和computed

我们可以把同一函数放在methods或者computed中，区别在于computed有缓存，计算属性只有在它的相关依赖发生改变时才会重新求值，即数据改变才会执行函数。而methods每当触发重新渲染时，就会再次执行函数。

一、methods用法

<div id="J_app">
  <p>{{ info }}</p>
  <button v-on:click="reverseText">逆转消息</button>
  <button @click="reverseText">v-on缩写，逆转消息</button>
</div>
var vapp = new Vue({
  el: ‘#J_app‘,
  data: {
    info: ‘Hello Vue.js!‘
  },
  methods: {
    reverseText: function () {
      this.info = this.info.split(‘‘).reverse().join(‘‘)
    }
  }
})

二、computed用法

1、默认用法

<div id="J_app">
  <p>{{ info }}</p>
  <p>{{ reverseText }}</p>
</div>
var vapp = new Vue({
  el: ‘#J_app‘,
  data: {
    info: ‘Hello Vue.js!‘
  },
  computed: {
    reverseText: function () {
      return this.info.split(‘‘).reverse().join(‘‘)
    }
  }
})

2、自定义set
computed默认只有get，可以自定义一个set。

<div id="J_app">
  <p>{{ info }}</p>
  <p>{{ reverseText }}</p>
</div>
var vapp = new Vue({
  el: ‘#J_app‘,
  data: {
    info: ‘Hello Vue.js!‘
  },
  computed: {
    reverseText: {
        get:function () {
          return this.info.split(‘‘).reverse().join(‘‘)
        },
        set:function () {
          this.info = this.info.split(‘‘).reverse().join(‘‘) +‘设置后‘
        }
    }
  }
})
vapp.reverseText ="learn vue from today";