首页  >  文章  >  web前端  >  VUE3基础教程:使用Vue.js响应式框架之computed

VUE3基础教程:使用Vue.js响应式框架之computed

PHPz
PHPz原创
2023-06-15 22:19:351849浏览

Vue.js是一款开源的JavaScript框架,它采用MVVM(Model-View-ViewModel)模式,旨在提供简单、灵活的方式来构建用户界面。其中,响应式框架是Vue.js最重要的特性之一,它允许开发者对数据进行双向的绑定和响应式更新。在Vue.js中,computed就是其中的一个重要概念。本文将介绍computed的基础用法和示例。

一. 什么是computed?

computed是Vue.js中的一个属性,它可以实现动态计算属性的功能。也就是说,computed可以根据所依赖的数据动态计算出一个新值,并且该计算属性在所依赖的数据发生变化时会自动更新。与methods不同,computed是一个计算属性而非方法。

二. computed的基础使用

computed属性可以使用以下方式进行定义:

new Vue({
  // ...
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

在上述代码中,我们定义了一个reversedMessage的计算属性,它是基于message属性的计算结果。

接下来,我们将在HTML模板中使用computed属性。为了取得计算属性的值,我们不再直接绑定message,而是使用computed属性,如下所示:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

在模板中,我们可以使用差值表达式{{ }}来显示计算属性的值。由于我们已经将reversedMessage作为计算属性进行了定义,因此Vue.js会自动进行计算并更新视图。

三. computed的缓存机制

在计算属性依赖的数据发生变化时,computed会自动重新计算并更新视图。但是,当计算属性所依赖的数据没有发生变化时,computed会记住上一次计算的结果,并直接返回上一次的值。这种缓存机制可以提高应用的性能和效率。

举个例子,如下代码中,我们定义了一个computed属性fullName:

new Vue({
  // ...
  data: {
    firstName: 'Peter',
    lastName: 'Parker'
  },
  computed: {
    fullName: function () {
      console.log('computed')
      return this.firstName + ' ' + this.lastName
    }
  }
})

当我们第一次访问fullName时,控制台会输出一条“computed”的消息。但是,当我们修改firstName或lastName属性的值时,computed不会每次都重新计算,而是直接返回上一次计算的结果。

四. computed与methods的区别

computed和methods都可以用来实现动态计算属性的功能,它们的主要区别在于计算属性的缓存机制。

在例子中,我们定义了一个计算属性fullName和一个方法getFullName:

new Vue({
  // ...
  data: {
    firstName: 'Peter',
    lastName: 'Parker'
  },
  computed: {
    fullName: function () {
      console.log('computed')
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    getFullName: function () {
      console.log('method')
      return this.firstName + ' ' + this.lastName
    }
  }
})

在模板中,我们可以通过以下方式来调用fullName和getFullName:

<div id="example">
  <p>Computed fullName: "{{ fullName }}"</p>
  <p>Method fullName: "{{ getFullName() }}"</p>
</div>

我们发现,在调用getFullName方法时,每次都会重新计算,而不会使用缓存结果。因此,如果我们需要频繁地调用某个方法,那么使用computed属性可以提高应用的性能和效率。

五. computed的示例

以下是一个计算购物车总价的示例,我们假设购物车的数据结构如下:

new Vue({
  // ...
  data: {
    items: [
      { name: 'iPhone', price: 6999, count: 1 },
      { name: 'iPad', price: 3888, count: 2 },
      { name: 'MacBook', price: 9888, count: 1 }
    ]
  },
  computed: {
    totalPrice: function () {
      var result = 0
      for (var i = 0; i < this.items.length; i++) {
        result += this.items[i].price * this.items[i].count
      }
      return result
    }
  }
})

在模板中,我们可以使用computed属性来显示购物车的总价:

<div id="example">
  <table>
    <thead>
      <tr>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.count }}</td>
        <td>{{ item.price * item.count }}</td>
      </tr>
      <tr>
        <td colspan="3">总价:</td>
        <td>{{ totalPrice }}</td>
      </tr>
    </tbody>
  </table>
</div>

在上述示例中,我们定义了一个计算属性totalPrice,该属性依赖于items数组中所有商品的价格和数量。每当数组中任意一个商品的价格或数量发生变化时,Vue.js会重新计算总价,并自动更新视图。

六. 总结

在Vue.js中,computed是一个非常强大和重要的特性,它是实现动态计算属性的关键。计算属性的缓存机制可以提高应用的性能和效率。与methods不同,computed是一个计算属性而非方法。通过学习和使用computed,我们可以更加方便和高效地构建优秀的Vue.js应用程序。

以上是VUE3基础教程:使用Vue.js响应式框架之computed的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn