代码干货 | vue计算属性
2017-08-10 14:29
519 查看
本文来源于阿里云-云栖社区,原文请点击这里。
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
在这种情况下,模板不再简单和清晰。在意识到这是反向显示 message 之前,你不得不再次确认第二遍。当你想要在模板中多次反向显示 message 的时候,问题会变得更糟糕
这就是对于任何复杂逻辑都应当使用计算属性的原因
这里我们声明了一个计算属性 reversedMessage 。我们提供的函数将用作属性 vm.reversedMessage 的 getter
vm.reversedMessage 的值始终取决于 vm.message 的值。因此当 vm.message 发生改变时,所有依赖于 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系:计算属性的 getter 是没有副作用,这使得它易于测试和推理
我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果,两种方式确实是相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。
>>>展开全文
计算属性
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }} </div>
在这种情况下,模板不再简单和清晰。在意识到这是反向显示 message 之前,你不得不再次确认第二遍。当你想要在模板中多次反向显示 message 的时候,问题会变得更糟糕
这就是对于任何复杂逻辑都应当使用计算属性的原因
基础例子
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> <script> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversedMessage: function () { // a computed getter return this.message.split('').reverse().join('') // `this` points to the vm instance } } }) </script>
这里我们声明了一个计算属性 reversedMessage 。我们提供的函数将用作属性 vm.reversedMessage 的 getter
console.log(vm.reversedMessage) // -> 'olleH' vm.message = 'Goodbye' console.log(vm.reversedMessage) // -> 'eybdooG'
vm.reversedMessage 的值始终取决于 vm.message 的值。因此当 vm.message 发生改变时,所有依赖于 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系:计算属性的 getter 是没有副作用,这使得它易于测试和推理
计算缓存 vs Methods
<p>Reversed message: "{{ reversedMessage() }}"</p> <script> methods: { // in component reversedMessage: function () { return this.message.split('').reverse().join('') } } </script>
我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果,两种方式确实是相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。
>>>展开全文
相关文章推荐
- vue 更改计算属性后select选中值不更改的解决方法
- 关于vue的使用计算属性VS使用计算方法的问题
- vue中的计算属性的使用和vue实例的方法示例
- Vue中computed(计算属性)、methods、watch的区别
- Vue:计算属性computed
- vue计算属性computed
- Vue.js学习系列(二十九)-- 计算属性(三)
- vue.js基础知识篇(3):计算属性、表单控件绑定
- vue 计算属性 get 和set
- TGraphicControl(自绘就2步,直接自绘自己,不需要调用VCL框架提供的函数重绘所有子控件,也不需要自己来提供PaintWindow函数让管理框架来调用)与TControl关键属性方法速记(Repaint要求父控件执行详细代码来重绘自己,还是直接要求Invalidate无效后Update刷新父控件,就看透明不透明这个属性,因为计算显示的区域有所不同)
- Vue.js学习之计算属性
- Vue.js学习 Item5 -- 计算属性computed与$watch
- vue-计算属性
- vue.js使用之计算属性与方法返回的差别
- 计算属性(vue练习例子)
- vue-使用计算属性遇到的坑
- vue 学习笔记 part-5 ->计算属性
- Vue之路之--计算属性
- vue.js计算属性(computed)
- vue计算属性和监听器实例解析