首页vue2 computed用法

vue2 computed用法

时间: 2023-11-15 22:00:31 浏览: 232

Vue computed计算属性的使用方法

5星 · 资源好评率100%

Vue computed计算属性的使用方法 computed计算属性是Vue框架中的一种强大特性，它可以根据依赖关系自动计算并缓存结果，从而提高应用程序的性能。在本文中，我们将详细介绍Vue computed计算属性的使用方法，并与methods和watch进行比较。 computed计算属性的基本概念 computed计算属性可以看作是一种特殊的method，它可以根据依赖关系自动计算并缓存结果。与methods不同，computed计算属性只有在依赖关系改变时才会重新计算，否则将直接返回缓存的结果。 computed计算属性的使用方法在Vue中，可以使用computed计算属性来计算并显示数据。例如，在以下代码中，我们使用computed计算属性来计算fullName： ```html <div id="example"> {{ fullName }}</div> ``` ```javascript var app = new Vue({ el: '#example', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) ``` 在上面的代码中，我们使用computed计算属性来计算fullName，并将其显示在页面上。 computed计算属性与method的对比与method不同，computed计算属性只有在依赖关系改变时才会重新计算，否则将直接返回缓存的结果。例如，在以下代码中，我们使用method和computed计算属性来计算fullName： ```html <div id="app9"> fullName<br/> {{fullName}}<br/> fullNameMethod<br/> {{getFullName()}} </div> ``` ```javascript var app9 = new Vue({ el: '#app9', data: { firstName: 'Foo', lastName: 'Bar' }, methods: { getFullName: function () { console.log("执行了methods") return this.firstName + ' ' + this.lastName } }, computed: { fullName: function () { console.log("执行了computed") return this.firstName + ' ' + this.lastName } } }) ``` 在上面的代码中，我们使用了method和computed计算属性来计算fullName。从控制台输出结果可以看到，使用method时，每次调用都会执行一次，而使用computed计算属性时，只有在依赖关系改变时才会重新计算。 computed计算属性与watch的对比 computed计算属性和watch都可以用来响应数据的变化，但是它们有不同的使用场景。例如，在以下代码中，我们使用watch和computed计算属性来响应数据的变化： ```html <div id="demo">{{ fullName }}</div> ``` ```javascript var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) ``` 在上面的代码中，我们使用watch和computed计算属性来响应数据的变化。可以看到，使用watch时，需要手动更新fullName，而使用computed计算属性时，Vue框架会自动处理依赖关系。 computed计算属性是Vue框架中的一种强大特性，可以根据依赖关系自动计算并缓存结果，从而提高应用程序的性能。

Vue2中的computed是一种计算属性，它可以根据依赖的数据动态计算出一个新的值，并且具有缓存性，只有当依赖的数据发生改变时才会重新计算。computed的使用方法是在Vue实例中定义一个computed对象，对象中的每个属性都是一个计算属性，属性名是计算属性的名称，属性值是一个函数，函数返回计算属性的值。在模板中可以直接使用计算属性的名称来获取计算属性的值，而不需要在模板中写复杂的逻辑代码。同时，computed也可以依赖其他的计算属性，这样就可以实现多个计算属性之间的复杂计算。例如，上面提供的代码中，computed对象中定义了一个color计算属性，它依赖于foo和foo1两个data属性，当foo或foo1发生改变时，color会重新计算。在模板中，我们可以直接使用{{color}}来获取color计算属性的值，而不需要在模板中写复杂的逻辑代码。

阅读全文