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属性，如下所示：
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
登录后复制
在模板中，我们可以使用差值表达式{{ }}来显示计算属性的值。由于我们已经将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：
Computed fullName: "{{ fullName }}"
Method fullName: "{{ getFullName() }}"
登录后复制
我们发现，在调用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 在模板中，我们可以使用computed属性来显示购物车的总价：
商品 单价 数量 小计 {{ item.name }} {{ item.price }} {{ item.count }} {{ item.price * item.count }} 总价： {{ totalPrice }}
登录后复制
在上述示例中，我们定义了一个计算属性totalPrice，该属性依赖于items数组中所有商品的价格和数量。每当数组中任意一个商品的价格或数量发生变化时，Vue.js会重新计算总价，并自动更新视图。
六. 总结
在Vue.js中，computed是一个非常强大和重要的特性，它是实现动态计算属性的关键。计算属性的缓存机制可以提高应用的性能和效率。与methods不同，computed是一个计算属性而非方法。通过学习和使用computed，我们可以更加方便和高效地构建优秀的Vue.js应用程序。
以上就是VUE3基础教程：使用Vue.js响应式框架之computed的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3229279.html
