Vue中如何使用computed属性处理响应式数据-Vue.js-PHP中文网

Vue中如何使用computed属性处理响应式数据

PHPz

发布： 2023-06-11 12:32:42

原创

4964 人浏览过

Vue是一款用于构建用户界面的渐进式JavaScript框架。在Vue中，数据的响应式更新是Vue最强大的特性之一。在Vue中，数据绑定是单向的，即数据的变化会影响到界面，但是界面的操作（如用户的输入等）并不会影响到数据。这些数据更新都是通过Vue中的computed属性自动完成的。

computed属性是Vue中用来处理响应式数据的一种方法，其本质是一个计算属性。相较于Vue中的methods方法，computed属性更侧重于处理数据的计算和数据的缓存，让Vue更高效地更新数据。本文将会介绍computed属性的使用方法及相关注意事项。

computed属性的基本使用方法

在Vue中声明computed属性的方法很简单，在Vue实例中添加一个computed对象即可，例如：

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

登录后复制

在上述代码中，我们声明了一个Vue实例，并在computed对象中定义了一个reversedMessage属性，该属性使用了message属性进行计算。当message属性的值发生变化时，Vue会自动更新计算出来的reversedMessage的值，并将其渲染到界面上。

需要注意的是，computed属性必须是一个函数。这个函数可以接收参数，也可以不接收任何参数。在函数内部，要使用this来访问Vue实例中的数据，而不能直接访问变量。

此外，computed属性的值会被缓存起来，只有在依赖的数据发生变化时才会重新计算，这样可以大大提高Vue的效率。例如，在上例中，当message属性的值不变时，每次读取reversedMessage属性会直接返回缓存中已经计算好的值，并不会重新计算。

computed属性的高级用法

computed属性中的setter

computed属性不仅可以用来读取数据，也可以用来设置数据。在computed属性中定义的set方法，会在属性被赋值时被调用。例如：

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

登录后复制

在上例中，我们定义了一个fullName属性，该属性可读可写。我们定义了一个get方法，返回了firstName和lastName的组合字符串。同时也定义了一个set方法，接收一个参数newVal，根据这个参数设置firstName和lastName的值。需要注意，computed属性中的setter函数并不会返回任何值。

computed属性的依赖

computed属性的计算是基于它所依赖的属性进行的。当依赖的属性发生变化时，computed属性会自动重新计算。Vue通过依赖追踪的机制，能够自动收集computed属性中使用的依赖关系。例如：

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

console.log(vm.reversedName)
vm.firstName = 'Tom'
console.log(vm.reversedName)

登录后复制

在上述代码中，fullName和reversedName都依赖于firstName和lastName两个属性。当我们访问reversedName属性时，Vue会自动计算出fullName和reversedName的值，并输出computed fullName和computed reversedName。当修改firstName的值时，Vue会重新计算fullName和reversedName的值，输出computed fullName和computed reversedName。

需要注意的是，当computed属性依赖的数据发生变化时，computed属性中的getter被调用的时间是异步的。这意味着，在依赖的数据发生变化时，Vue并不会立即更新computed属性的值，而是在下一个事件循环中更新。这样可以避免不必要的性能开销。

computed属性与watch属性的区别

除了computed属性之外，Vue还提供了另一种处理响应式数据的方法——watch属性。它们都有处理响应式数据的功能，但是在实现方式上有所不同。

watch属性是一个监听器，当一个数据发生变化时，watch属性会立即执行一段响应函数，并且具有处理数据的副作用。例如：

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe',
    fullName: ''
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

登录后复制

在上例中，我们定义了watch属性来监听数据的变化，并在firstName或lastName发生变化时更新fullName属性的值。需要注意的是，watch属性中的处理函数在数据变化时会立即执行。

computed属性与watch属性最大的区别在于它们的实现方式和使用场景。computed属性更适合处理数据计算和缓存等重复性操作，可以大大提高Vue的效率。而watch属性则更适合监听数据的变化，例如当数据变化时触发动画效果或发送请求等具有副作用的操作。