Vue计算属性及使用详解

在Vue中，有一种非常有用的概念：计算属性。在本篇文章中，我将详细解释Vue计算属性的概念及其使用方法，并给出一些示例说明。

什么是Vue计算属性？

计算属性本质上是一个函数，它可以监听Vue实例中的数据变化，并根据数据的变化返回一个新的计算结果。我们使用计算属性来简化Vue模板中复杂的计算逻辑，提高代码的可读性和可维护性。

计算属性的用法

计算属性有两个关键的概念：getter和setter。getter表示获取计算属性的值，setter则在计算属性的值发生变化时被调用。

在Vue实例中定义计算属性的方法如下：

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    // 计算属性的getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    },
    // 计算属性的setter
    upperCaseMessage: {
      get: function () {
        return this.message.toUpperCase()
      },
      set: function (newValue) {
        this.message = newValue.toLowerCase()
      }
    }
  }
})

在上述代码中，我们定义了两个计算属性：reversedMessage和upperCaseMessage。reversedMessage的getter方法返回反转后的message字符串，upperCaseMessage的getter方法返回message的大写字符串，setter方法将接收到的值转换为小写字符串并赋值给message。

在Vue模板中，我们可以使用计算属性来显示计算逻辑的结果：

<div id="app">
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p>
  <p>{{ upperCaseMessage }}</p>
</div>

在上述代码中，我们使用了三个插值表达式来分别显示message、reversedMessage和upperCaseMessage的值。插值表达式会自动调用计算属性的getter方法获取最新的计算结果。

计算属性的缓存

计算属性的值是基于它们的响应式依赖进行缓存的。只要相关依赖发生改变，Vue就会自动更新计算属性的值。而如果依赖没有发生变化，计算属性就会返回缓存的结果，从而提高计算效率。

下面是一个计算属性缓存的例子：

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      console.log('计算 fullName')
      return this.firstName + ' ' + this.lastName
    }
  }
})

注意，我们在fullName的getter方法中添加了一个console.log语句，用于显示计算fullName的过程是否被执行。

在模板中，我们使用插值表达式来显示fullName：

<div id="app">
  <p>{{ fullName }}</p>
</div>

当我们访问页面时，控制台将只显示一次“计算fullName”字符串，而随后的更改firstName和lastName的操作将不会再次触发计算fullName的过程。这是因为Vue自动缓存了这个计算属性的值，并且只有依赖项firstName和lastName发生变化时才会重新计算。

计算属性的依赖

计算属性的值是基于它们的响应式依赖进行缓存的。换句话说，只有当与计算属性相关联的响应式数据发生变化时，计算属性才会被重新计算。

可以使用watch属性来查看计算属性如何追踪其依赖：

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  },
  watch: {
    firstName: function (newValue, oldValue) {
      console.log(`firstName 从 ${oldValue} 变为 ${newValue}`)
    },
    lastName: function (newValue, oldValue) {
      console.log(`lastName 从 ${oldValue} 变为 ${newValue}`)
    },
    fullName: function (newValue, oldValue) {
      console.log(`fullName 从 ${oldValue} 变为 ${newValue}`)
    }
  }
})

在上述代码中，我们使用了watch属性来监视firstName、lastName和fullName的值变化情况。

在模板中，我们使用插值表达式来分别显示firstName、lastName和fullName的值：

<div id="app">
  <p>{{ firstName }}</p>
  <p>{{ lastName }}</p>
  <p>{{ fullName }}</p>
</div>

当我们更改firstName时，控制台将会输出一条信息，相应地，更改lastName时，控制台也会输出一条信息。但是当我们更改fullName时，控制台并不会输出任何信息。这是因为fullName是由firstName和lastName这两个依赖项衍生出来的，虽然计算属性的值变了，但是这种变化不会引发其他更改。

计算属性的getter和setter

如前所述，计算属性包括getter和setter：

getter返回计算属性的值。
setter在计算属性的值被赋值时进行调用。

计算属性的setter可以用来监视计算属性的变化，并相应地做出响应：

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

在上述代码中，我们重新定义fullName计算属性的处理方法，将其变为一个对象，包括getter和setter方法。setter方法将计算属性的值分段赋给名称变量，然后用它们设置firstName和lastName变量。

在模板中，我们使用v-model指令将输入绑定到计算属性：

<div id="app">
  <input type="text" v-model="fullName">
  <p>{{ firstName }}</p>
  <p>{{ lastName }}</p>
</div>

当我们在输入框中输入新的全名时，fullName计算属性的setter将被调用，相应地更新firstName和lastName。

示例1：计算属性的应用

计算属性在处理各种形式的数据时非常有用。例如，假设有一个由用户上传的文件列表，每个文件包含文件名和大小。我们可以定义一个计算属性，将所有文件的大小相加，并返回总文件大小。

首先，我们定义一个文件列表和一个计算属性：

var vm = new Vue({
  el: '#app',
  data: {
    files: [
      { name: 'file1.txt', size: 1024 },
      { name: 'file2.txt', size: 2048 },
      { name: 'file3.txt', size: 4096 }
    ]
  },
  computed: {
    totalSize: function () {
      var size = 0
      for (var i = 0; i < this.files.length; i++) {
        size += this.files[i].size
      }
      return size
    }
  }
})

在上述代码中，我们定义了一个名为files的数据数组，其中每个对象具有name和size属性。我们还定义了一个计算属性totalSize，用于将所有文件的大小添加在一起并返回总文件大小。

在模板中，我们使用插值表达式来显示计算属性的值：

<div id="app">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Size</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="file in files">
        <td>{{ file.name }}</td>
        <td>{{ file.size }}</td>
      </tr>
      <tr>
        <td><strong>Total:</strong></td>
        <td>{{ totalSize }}</td>
      </tr>
    </tbody>
  </table>
</div>

在模板中，我们使用Vue的v-for指令来遍历files数组，并将每个对象的名称和大小输出到表格中。最后一行将计算属性totalSize的值显示到表格中。

示例2：计算属性的过滤器

计算属性可以像方法那样使用，在插值表达式中使用来展示计算结果。与此同时，匿名函数的形式也可以用于计算属性。

var vm = new Vue({
  el: '#app',
  data: {
    files: [
      { name: 'file1.txt', size: 1024 },
      { name: 'file2.txt', size: 2048 },
      { name: 'file3.txt', size: 4096 }
    ]
  },
  computed: {
    // 包含空格的文件名删除空格
    cleanFiles: function () {
      return this.files.map(function (file) {
        return { name: file.name.replace(/\s+/g, ''), size: file.size }
      })
    }
  }
})

在上述代码中，我们重新定义了cleanFiles计算属性的处理方法，将其变为一个匿名函数，该函数将删除文件名中的所有空格。

在模板中，我们可以使用v-for指令和插值表达式来遍历cleanFiles数组，并将每个文件名的空格删除：

<div id="app">
  <ul>
    <li v-for="file in cleanFiles">{{ file.name }}</li>
  </ul>
</div>

在上述代码中，我们使用Vue的v-for指令遍历cleanFiles数组，并将每个文件的名称输出为一个列表项，我们使用插值表达式来显示计算属性的结果，即删除空格后的文件名。

总结

计算属性是Vue的一个重要概念，在Vue模板中，通过使用计算属性，我们可以编写简洁、易读的代码，可以简化模板中的计算逻辑。在本文中，我们详细了解了计算属性的定义、使用方式、缓存、依赖、getter和setter等重要特性，同时也通过示例说明了计算属性的各种应用场景。希望本文能对您学习Vue编程有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue计算属性及使用详解 - Python技术站