vue计算属性

xiao_kai
57 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

定义计算属性

表达式的逻辑过于复杂的时候，都应当考虑使用计算属性，计算属性是以函数形式，在vue组件的选项对象的computed选项中定义，我们将上面的字符串翻转的功能使用计算属性来实现 演示代码：

<template>
  <div id="app">
    <p>原始字符串{{message}}</p>
    <p>计算后翻转字符串{{reversedMessage}}</p>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'xiaokai'
    }
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

运行结果 image.png

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作 property reversedMessage 的 getter函数。当message属性的值改变时reversedMessage的值也会更新

计算属性默认只有getter函数因此是不能直接修改计算属性的如果在需要时你也可以提供一个 setter代码如下：

 computed: {
    fullName: {
      // getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }

计算属性缓存

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

<template>
  <div id="app">
    <p>原始字符串{{message}}</p>
    <p>计算后翻转字符串{{reversedMessage()}}</p>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'xiaokai'
    }
  },
  methods: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

avatar
文章
阅读
粉丝