computed之计算属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了computed之计算属性相关的知识,希望对你有一定的参考价值。

参考技术A

(1) 计算属性的getter和setter

(2) 计算属性的缓存(对比computed和methods)

为什么要使用计算属性 :computed和methods看起来都可以实现我们的功能,但是计算属性会进行缓存,多次使用时计算属性只会调用一次,性能更高,所以优选使用计算属性。

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";

 

以上是关于computed之计算属性的主要内容,如果未能解决你的问题,请参考以下文章

vue之watch和计算属性computed

vue之computed(计算属性)的使用方法有哪些?

Vue的computed(计算属性)使用实例之TodoList

Vue之计算属性

Vue.js(2.x)之计算属性

12 计算属性computed: 当计算属性依赖的内容发生变更时,才会重新执行计算