Vue计算属性(computed)

Vue计算属性(computed)教程

在 Vue 模板 中可以使用双向绑定来处理一些数据或表达式。但是表达式如果过长，或逻辑更为复杂时，就会变得雕肿甚至难以阅读和维护。

Vue 所有的计算属性都以函数的形式写在 Vue 实例 内的 computed 选项内，最终返回计算后的结果。

Vue 计算属性本质上就是一个方法，只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当作属性来使用的，并不会把计算属性当作方法来调用，调用的时候不需要加 ()。

Vue(computed)计算属性详解

用法

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

语法

var app = new Vue({
    el: '#div',
    computed:{
        func(){}
    }
})

说明

Vue 所有的计算属性都写在 computed 中。

案例

Vue计算属性

<!DOCTYPE html>
<html>
<head>
	<title>Vue 计算属性</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
	<div id="app">
		<input type="number" v-model="value1">+
		<input type="number" v-model="value2">=
		{{value1+value2}}
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			"value1":1,
			"value2":2
		}
	})
</script>
</html>

浏览器运行效果如下图所示：

01 vue computed.png

我们看到，我们使用了 Vue 的模板表达式实现了运算，但是设计 Vue 模板表达式的初衷是用于简单运算的。

如果在模板中放入太多的逻辑会让模板过重且难以维护。因此我们可以使用方法，来进行运算并返回数据：

<!DOCTYPE html>
<html>
<head>
	<title>Vue 计算属性</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
	<div id="app">
		<input type="number" v-model="value1">+
		<input type="number" v-model="value2">=
		{{add()}}
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			"value1":1,
			"value2":2
		},
		methods:{
			add(){
				return this.value1+this.value2;
			}
		}
	})
</script>
</html>

浏览器运行效果如下图所示：

02 vue computed.png

但是每次在模板中使用 {{ add() }} 方法就会被调用执行一次。所以，对于任何复杂逻辑，都应当使用 Vue 计算属性，因为计算属性，会自动缓存数据。

<!DOCTYPE html>
<html>
<head>
	<title>Vue 计算属性</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
	<div id="app">
		<input type="number" v-model="value1">+
		<input type="number" v-model="value2">=
		{{add}}
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			"value1":1,
			"value2":2
		},
		computed:{
			add(){
				return this.value1+this.value2;
			}
		}
	})
</script>
</html>

浏览器运行效果如下图所示：

03 vue computed.png

我们看到，使用 Vue 计算属性同样实现了函数的调用。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值；多次调用，计算属性会立即返回之前的计算结果，而不必再次执行函数。

Vue计算属性(computed)总结

Vue 所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果。

计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值；多次调用，计算属性会立即返回之前的计算结果，而不必再次执行函数。