vue 计算属性

作者：小恺

2022 年 6 月 12 日
本文字数：1345 字
阅读完需：约 4 分钟

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

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

复制代码

运行结果

这里我们声明了一个计算属性 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！如果你不希望有缓存，请用方法来替代。

发布于: 刚刚阅读数: 3

小恺

关注

还未添加个人签名 2021.02.22 加入

还未添加个人简介

发布

暂无评论

创作场景

vue 计算属性

定义计算属性

计算属性缓存

小恺

评论