Vue.js计算属性和监听器的深入分析

一.概述

计算属性

模板中的表达式非常方便，但它们最初是为简单操作而设计的。在模板中放入太多的逻辑会使模板太重，难以维护。例如：

Div id='示例“{message。拆分(“”)。反转()。join(')} }/div在这里，模板不再是简单的声明性逻辑。在意识到这是您想要显示变量消息的翻转字符串之前，您必须观察一会儿。当你想在模板中多次引用这里的翻转字符串时，处理起来会比较困难。

因此，对于任何复杂的逻辑，都应该使用计算属性。

基本示例

div id=' Example ' por original message : ' { message } } '/p pccomputed reversed message : ' { reversed message } } '/p/div var vm=new Vue({ El : ' # Example }，data: {message:' hello'}，计算属性的computed 3: {//getter reversed message 3360 function(){/` this '指向返回此消息的VM实例split(')。反转()。join(“”)} }

这里我们声明一个计算属性reversedMessage。我们提供的函数将用作属性vm.reversedMessage的getter函数

console . log(VM . reverstedmessage)/=' olleh ' VM . message='再见' console . log(VM . reverstedmessage)/=' eybdoog '您可以在模板中绑定计算属性，就像绑定普通属性一样。Vue知道vm.reversedMessage依赖于vm.message，所以当vm.message发生变化时，所有依赖于vm.reversedMessage的绑定也会更新。最棒的是，我们以声明的方式创建了这种依赖性：用于计算属性的getter函数没有副作用，这使得测试和理解更加容易。

第二，计算属性缓存与。

您可能已经注意到，我们可以通过在表达式中调用方法来达到同样的效果

p reverstedmessage 3360“{ reverstedmessage()} }”/p//在组件中，methods : { reverstedmessage 3360 function(){返回此。message.split(“”)。反转()。join ('')}}我们可以将同一个函数定义为一个方法两个方法的最终结果完全相同。但是，不同之处在于计算属性是基于它们的依赖关系进行缓存的。只有当计算属性的依赖关系发生变化时，才会重新计算该属性。这意味着，只要消息没有改变，多次访问reversedMessage计算属性将立即返回以前的计算结果，而不必再次执行该函数。

这也意味着以下计算属性不会被更新，因为Date.now()不是一个被动依赖项

computed : { now : function(){ return date。now ()}}相比之下，每当触发重新渲染时，调用方法总是会再次执行函数。

为什么我们需要缓存？

假设我们有一个高性能开销的计算属性A，需要遍历一个巨大的数组，做大量的计算。那么我们可能还有其他依赖于A的计算属性，如果没有缓存，我们必然会多次执行A的getter！如果不需要缓存，请改用方法。

第三，计算属性vs监听属性

Vue提供了一种更通用的方法来观察和响应Vue实例上的数据变化：监听属性。当您有一些数据需要与其他数据一起更改时，您很容易滥用watch——，尤其是如果您以前使用过AngularJS。但是，通常最好使用计算属性，而不是命令式观察回调。

仔细想想这个例子

div id=' demo ' { { full name } }/div var VM=new Vue({ El : ' # demo }，data: { firstName: 'Foo '，lastName: 'Bar '，fullName: 'Foo Bar' }，watch : { first name : function(val){ this。fullname=val'' this。lastname}，lastname :函数(val) {this。全名=这个。名字' ' val}})上面的代码是命令式的，重复的。将其与计算属性的版本进行比较：

varvm=new vue({ El : ' # demo }，data: {firstname3360' foo '，lastname3360' bar'}，computed : { full name 3360 function(){ return this。名为“这个”。lastname}}})

第四，计算属性的设置者

默认的计算属性只是getter，但您也可以在需要时提供setter

//.computed : { full name : {//getter get : function(){ return this . first name ' ' this . last name }，//setter set : function(new value){ var names=new value . split(')this . first name=names[0]this . last name=names[names . length-1]} }//.当vm.fullName='John Doe '再次运行时，将调用setter，vm.firstName和vm.lastName将相应更新。

动词（verb的缩写）听众

虽然计算属性在大多数情况下更合适，但有时需要自定义侦听器。这就是为什么Vue通过watch选项提供了一种更通用的方法来响应数据变化。当您需要在数据更改时执行异步或代价高昂的操作时，此方法最有用。

例如：

div id='watch-example' p问一个是/否的问题：输入v-model='question' /p p{{答案}}/p/div！-因为AJAX库和常用工具的生态相当丰富，Vue的核心代码就不重复了-！-提供这些功能以保持简单。它还允许您自由选择您更熟悉的工具。-script src=' http :https://cdn . jsdeliver . net/NPM/[email protected]/dist/axios . min . js '/script script src=' http :3359 cdn . jsdeliver . net/NPM/[email protected]/lodash . min . js '/script script var watch exampvm=new Vue({ El : ' # watch-example '，data: { question:}，watch: {//如果‘问题’发生变化，此函数将运行question:函数(新问题，旧问题){this。回答='等你停止打字'.这个。get answer ()}}，methods : {//` _。“去抖”是一个通过Lodash限制工作频率的功能。//在这个例子中，我们想要限制访问yesno.wtf/api.的频率//直到用户完成输入后才会发送AJAX请求。欲了解更多关于/`_。去抖功能(及其近亲` _。油门`)，//请参考：GetAnswer : _。去抖(函数(){if (this。的question.index('？)，https://lodash.com/docs#debounce.)===-1){ this . answer='问题通常包含一个问号。-)“还}这个.回答=”思考.var VM=this axios . get(' https://yesno . wtf/API ')。然后(函数(响应){ vm.answer=_。大写(response.data.answer) })。catch(函数(错误){ vm.answer='Error！达不到API，”错误})}，//这是我们等待判断用户停止输入的毫秒数500)} })/脚本结果：没有输入的时候？否，则显示如下：

什么时候有？有时会输出“是”或“否”

具体案例效果地址：监听器

在这个例子中，使用watch选项允许我们执行异步操作(访问一个API)，限制我们执行这个操作的频率，并在得到最终结果之前设置中间状态。这些都是计算属性做不到的。

摘要

以上是边肖介绍的Vue.js的计算属性和监听器，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！