深入浅析Vue.js计算属性和侦听器

　　

　　

,计算属性

　　

,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

　　 　　 　　& lt; div id=袄印北? 　　{{message.split (") .reverse . join () ()}} 　　& lt;/div> 　　 　　

,,在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量信息的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。

　　

,所以,对于任何复杂逻辑,你都应当使用计算属性。

　　

,基础例子

　　 　　 　　& lt; div id=袄印北? 　　& lt; p>原始消息:“{{消息}}”& lt;/p> 　　& lt; p>计算了消息:“{{reversedMessage}}”& lt;/p> 　　& lt;/div> 　　 　　var vm=new Vue ({ 　　埃尔:“#例子”, 　　数据:{ 　　消息:“你好” 　　}， 　　计算:{//计算属性的getter 　　reversedMessage:函数(){//罢狻敝赶蛐槟饣道? 　　返回this.message.split(”).reverse . join () () 　　} 　　} 　　}) 　　 　　

,,,结果:

　　

深入浅析Vue。js计算属性和侦听器
　　

　　

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

　　 　　 　　console.log (vm.reversedMessage)//=比;“olleH” 　　vm。消息='再见' 　　console.log (vm.reversedMessage)//=比;“eybdooG” 　　 　　

,,,,,你可以像绑定普通属性一样在模板中绑定计算属性.Vue知道vm。reversedMessage依赖于vm。消息,因此当vm。消息发生改变时,所有依赖vm。reversedMessage的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系:计算属性的getter函数是没有副作用(副作用)的,这使它更易于测试和理解。

　　

　　

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

　　 　　 　　& lt; p>扭转信息:“{{reversedMessage ()}}”& lt;/p>//在组件中 　　方法:{ 　　reversedMessage:函数(){ 　　返回this.message.split(”).reverse . join () () 　　} 　　} 　　 　　

,,,,,,,我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要消息还没有发生改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。

　　

,,,这也同样意味着下面的计算属性将不再更新,因为Date.now()不是响应式依赖

　　 　　 　　计算:{ 　　现在:函数(){ 　　返回Date.now () 　　} 　　} 　　 　　

,,,,,相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

　　

我们为什么需要缓存?

　　

,,,,,假设我们有一个性能开销比较大的的计算属性,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存,我们将不可避免的多次执行的getter !如果你不希望有缓存,请用方法来替代。

　　

　　

,,,,,,Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用手表——特别是如果你之前使用过AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的看回调。

　　

,细想一下这个例子

　　 　　 　　& lt; div id=把菔尽痹趝{fullName}} & lt;/div> 　　 　　var vm=new Vue ({ 　　艾尔:#演示, 　　数据:{ 　　名字:“Foo”, 　　姓:“酒吧”, 　　fullName:“Foo酒吧” 　　}， 　　看:{ 　　firstName:函数(val) { 　　这一点。fullName=val + " " + this.lastName 　　}， 　　姓:函数(val) { 　　这一点。fullName=irstName +‘+瓦尔 　　} 　　} 　　}) 　　 　　

,,,,上面代码是命令式且重复的。将它与计算属性的版本进行比较:

　　 　　 　　var vm=new Vue ({ 　　艾尔:#演示, 　　数据:{ 　　名字:“Foo”, 　　姓:“酒吧” 　　}， 　　计算:{ 　　fullName:函数(){ 　　返回。firstName +‘+ this.lastName 　　} 　　} 　　})

深入浅析Vue.js计算属性和侦听器