1）定义计算属性的时候是按照定义方法的标准(须有返回值return)
2）使用计算属性的时候则可以和数据一样使用(无需括号)
3）如果使用方法定义表达式，则会重复调用该方法，消耗内存，减少性能
4）使用计算属性的话可有效避免第三条出现的情况，该表达式在计算属性中只会请求一次
5）计算属性适用于：
当某个新数据是依赖于某一些原始数据计算得到的，这时候就该新数据应该用计算属性定义
只有原始数据不发生变化，不管使用了多少次计算数据，该计算属性的方法只会调用一次
只有当所依赖的原始数据发生变化时，计算属性的方法才重新调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"/>
<p>{{msg}}</p>
<p>{{newMsg()}}</p>
<p>{{newMsg()}}</p>
<p>{{newMsg()}}</p>
<p>{{strMsg}}</p>
<p>{{strMsg}}</p>
<p>{{strMsg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
//定义数据
msg:"hello"
},
methods:{
//定义方法(多次调用)
newMsg(){
console.log("调用方法")
return this.msg.toUpperCase();
}
},
computed:{
//计算属性(调用一次)
strMsg:function(){
console.log("调用计算属性")
return this.msg.toUpperCase()
}
}
});
/*总结：
1)定义计算属性的时候是按照定义方法的标准(须有返回值return)
2)使用计算属性的时候则可以和数据一样使用(无需括号)
3)如果使用方法定义表达式，则会重复调用该方法，消耗内存，减少性能
4)使用计算属性的话可有效避免第三条出现的情况，该表达式在计算属性中只会请求一次
5)计算属性适用于：
当某个新数据是依赖于某一些原始数据计算得到的，这时候就该新数据应该用计算属性定义
只有原始数据不发生变化，不管使用了多少次计算数据，该计算属性的方法只会调用一次
只有当所依赖的原始数据发生变化时，计算属性的方法才重新调用
*/
</script>
</body>
</html>
