Vue 计算属性

最新推荐文章于 2022-10-15 09:06:56 发布

原创最新推荐文章于 2022-10-15 09:06:56 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

Vue学习之路专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Vue.js中计算属性的基本概念及使用方法，包括如何利用计算属性进行数据处理、依赖跟踪和缓存机制，同时对比了计算属性与methods的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用：在复杂的逻辑时应该使用计算属性。

关键字：computed。

和其他方法一样，定义在Vue实例中。

如：

<div id="app">
		{{reversedText}}
	</div>
	<script src="./js/vue.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				text:'123,456'
			},
			computed:{
				reversedText:function(){
					return this.text.split(',').reverse().join(',');
				}
			}
		});
	</script>

计算属性的用法：

<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				package1:[
						{
							name:'iPhone 7',
							price:7199,
							count:2
						},
						{
							name:'iPhone 7',
							price:2888,
							count:1
						}
					],

					package2:[
						{
							name:'apple',
							price:3,
							count:5
						},
						{
							name:'banana',
							price:2,
							count:10
						}
					]
			},
			computed:{
				prices:function(){
					var prices = 0;
					for (var i = 0; i < this.package1.length; i++) {
						prices += this.package1[i].price*this.package1[i].count;
					}
					for (var i = 0; i < this.package2.length; i++) {
						prices += this.package2[i].price*this.package2[i].count;
					}
					return prices;
				}
			}
		})
	</script>

一、计算属性可以依赖其他计算属性

二、计算属性还可以依赖其它实例的数据

如：

<div id="app1"></div>
	<div id="app2">
		{{reversedText}}
	</div>
	<script src="./js/vue.js"></script>
	<script type="text/javascript">
		var app1 = new Vue({
			el:'#app1',
			data:{
				text:'123,456'
			}
		});

		var app2 = new Vue({
			el:'#app2',
			computed:{
				reversedText:function(){
					return app1.text.split(',').reverse().join(',');
				}
			}
		})
	</script>

计算属性缓存：

计算属性和methods的作用相同，但是计算属性基于依赖缓存的，也就是说依赖数据没有改变，就会缓存下来。而methods则是每次执行都会调用。

官方文档：

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