理解vue中计算属性computed，以及使用场景
在vue中，计算属性是用于自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。其特点：
监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。另外set设置属性，并不是直接修改自身的值，而是修改它的依赖。
数据可以进行逻辑处理，减少模板中计算逻辑。
对计算属性中的数据进行监视。
1、应用场景
很多时候我们在页面中可能需要对一些数据进行封装转换，如：计算总价，或对一些变量进行拼接等等。这时候就可以用到它2、computed和方法的区别
其时在methods里定义一个方法来封装逻辑也是可以的，但是computed的写法要更简介一些,，调用起来也容易,不需要加（）computed中其时是自带get和set访问器的，只不过在一般在定义的时候我们不需要一一现实，而且computed是带有缓存的，如果多次重复使用属性的话，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进行对比
watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。
computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。
计算属性不能执行异步任务，计算属性必须同步执行，watch可执行异步任务，遇到异步任务，就交给侦听属性
watch也可以检测computed属性
总结
计算属性适合用在模板渲染中，某个值是依赖了其它的响应式对象甚至是计算属性计算而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。
computed能做的，watch都能做，反之则不行
能用computed的尽量用computed
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
