Vue 计算属性

Posted 2021-03-04 d0usr

1、computed 选项：

<template>
  <div id="app">
      {{ reversedText }}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      text: ‘123,456‘
    };
  },
  computed: {
    reversedText: function() {
      // 这里的 this 指向的是当前 Vue 实例
      return this.text.split(‘,‘).reverse().join(‘,‘);
    }
  }
  
};
</script>

2、methods 选项：

<template>
  <div id="app">
      <!-- 注意，这里的 reversedText 是方法，所以要带() -->
      {{ reversedText() }}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      text: ‘123,456‘
    };
  },
  methods: {
    reversedText: function() {
      // 这里的 this 指向的是当前 Vue 实例
      return this.text.split(‘,‘).reverse().join(‘,‘);
    }
  }
  
};
</script>

3、可以发现methods里的方法与计算属性两种方式最终执行结果是完全相同的。然而，不同的是计算属性是基于它的依赖进行缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值。这就意味着只要 text 还没有发生改变，多次访问 reversedText 计算属性会立即返回之前的计算结果，而不必再次执行函数。

4、使用计算属性还是 methods 取决于你是否需要缓存，出于性能考虑，当遍历大数组和做大量计算时，应当使用计算属性。

 

 

参考：

《Vue.js 实战》

https://cn.vuejs.org/v2/guide/