在vue中，计算属性是用于自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。其特点：

监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。
数据可以进行逻辑处理，减少模板中计算逻辑。
对计算属性中的数据进行监视。

1、应用场景

2、computed和方法的区别

3、案例说明

计算属性中可以用于进行一些比较复杂的操作，比如计算总价：

<div id="app">
	<span v-text="price"></span>
	<input v-model="list[0].price"></input>
</div>
<script>
new Vue({
	el:'#app',
	data:{
		list:[
			{name:'香蕉',price: 6},
			{name:'哈密瓜',price: 10},
			{name:'苹果',price: 5},
		],
	},
	computed:{
		price:function(){
			let result=0
			for(let i in this.list){
				result+=Number(this.list[i].price)
			}
			return result
		}
	}
})
</script>

页面直接显示总价格为21。在输入框绑定list第一个元素的price值。当修改输入框中数字时候，我们会发现总价格会自动更新。

4、计算属性的可缓存性

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

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

computed: {
  now: function () {
    return Date.now()
  }
}

5、与watch进行对比

总结

计算属性适合用在模板渲染中，某个值是依赖了其它的响应式对象甚至是计算属性计算而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。

链接: https://fly63.com/article/detial/10212