1、Vue的计算属性是什么?
首先我们先了解一下什么是模板内表达式？
例子：
可见，我在View层的模板里写了一个表达式（三元表达式）
显而易见，这就是模板内表达式。
然而，这跟计算属性有什么关系呢？
因为模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。【如上图，就会显得很臃肿】
因此，Vue推荐使用计算属性来描述依赖响应式状态的复杂逻辑。
2、计算属性
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Vue的计算属性</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<div>{{optimize}}</div>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
//data：属性：vm
data(){
return{
program: {
name: '各种编程语言',
language:['Vue','Java','Python','PHP']
}
}
},
computed:{
optimize(){
return this.program.language.length>0?'Yes' : 'No'
}
}
});
</script>
</body>
</html>
说明：
我在这里定义了optimize计算属性，里面的this.program绑定了data()里面的数据，是依赖着data()，当数据发生改变optimize里面的内容也会重新计算相应更新。
3、计算属性与方法
- 当计算属性与方法名重名时候，只会调用methods的方法。
- 计算属性缓存与方法。
计算属性是有缓存的，而方法是没有的。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Vue的计算属性</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<div>{{optimize1()}}</div>
<div>{{optimize2}}</div>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data(){
return{
message:'测试'
}
},
methods:{
optimize1:function (){
return Date.now()
}
},
computed:{
optimize2(){
this.message;
return Date.now()
}
}
});
</script>
</body>
</html>
说明：
注意：methods和computed里的东西不能重名,重名之后，只会调用methods的方法
methods：定义方法， 调用方法使用optimize1()， 需要带括号
computed：定义计算属性， 调用属性使用optimize2， 不需要带括号：this.message是为了能够让optimize2观察到数据变化而变化
如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.message=”新消息”， 改变下数据的值，再次测试观察效果!
总结：
若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。
相比之下，方法调用总是会在重渲染发生时再次执行函数。
为什么需要缓存呢？想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。没有缓存的话，我们会重复执行非常多次 list 的计算函数，然而这实际上没有必要！如果你确定不需要缓存，那么也可以使用方法调用。