详解Vue文档中的computed函数

vue.js 是一款流行的javascript前端框架。它可以轻易地实现对html与javascript之间的连接，从而提高了web应用的性能。vue.js框架中有一个叫作computed的函数，其主要用途是用来对页面数据进行响应式计算和公式运算。接下来就让我们来详解一下这个函数。

什么是computed函数？

computed函数是Vue.js中的一个非常重要的函数，其作用是用于计算属性，计算属性能对其他的属性进行数据处理，返回新的数据。computed函数依赖于data对象中定义的数据，当这些数据发生变化时，computed函数内部的代码也会自动更新。

我们可以将computed函数看做是Vue中的一个响应式数据，因为它也具备响应式的特性。当计算属性的依赖数据发生改变时，计算属性会自动重新计算。

语法

立即学习“前端免费学习笔记（深入）”；

computed函数的语法非常简单：

computed: {
    计算属性名字: function() {
        //return 你要计算的值
    }
}

这里我们需要用到一个关键字computed，其后面跟着一个对象，对象中包含一个或者多个计算属性。计算属性名字即为我们自己定义的名称（可以理解为变量名），它们的返回值就是我们计算结果。这里需要注意的是，在计算属性的方法中不要对其他的data数据进行手动更改，因为这样会造成死循环。

实例

为了帮助大家更好地理解computed函数，下面来看一个实例。

    
    
{{ reversedMessage }}

							

								
								

									佳蓝智能应答系统
									
类似智能机器人程序，以聊天对话框的界面显示，通过输入问题、或点击交谈记录中的超链接进行查询，从而获取访客需要了解的资料等信息。系统自动保留用户访问信息及操作记录。后台有详细的设置和查询模块。适用领域：无人职守的客服系统自助问答系统智能机器人开发文档、资源管理系统……基本功能：设置对话界面的显示参数设置各类展示广告根据来访次数显示不同的欢迎词整合其他程序。
								
								下载 
							
						

我们在模板中定义了一个输入框和一个段落标签，输入框中的内容通过v-model指令与data中的message数据绑定。同时，我们定义了一个计算属性reversedMessage，该计算属性返回的是message数据的倒序排列结果。下面是完整的JavaScript代码：

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

这个实例中的computed函数中的reversedMessage方法是用来计算message倒序结果的。当我们在输入框中输入信息时，reversedMessage方法就会自动地被触发更新。这是因为reversedMessage方法依赖于data中的message数据，只要该数据发生变化，reversedMessage方法就会自动刷新页面。

computed函数的优点

computed函数主要有以下几个优点：

1.节省代码：在使用computed函数的情况下，我们无需写过多的代码，就可以完成对数据的更新和计算。

2.提高性能：computed函数的计算结果是会缓存的，只有当其所依赖的数据发生改变时，才会重新计算。

3.代码简洁：由于computed函数自动检测数据更改，所以我们无需事先指定计算属性的依赖数据。这样就可以大大简化我们的代码。

总结

computed函数是Vue.js中一种非常有用的数据取值方法。它可以让我们更加便捷地进行数据的计算和更新，在代码的简洁性和性能方面都具有很大的优势。如果你是一个Vue.js的新手，那么在学习Vue.js框架时建议优先掌握computed函数的使用。