计算属性:
数据一般都是存储在data对象中,但是如果我们想要对这个data数据进行处理,然后显示处理后的数据,但是又由于其他地方可能还在引用数据原来的样子,如果我们直接在data里处理,就会导致所有使用该数据的节点全部发生变化。另外,通过在插值表示式中,写处理则会导致大量重复的代码,而且差值表达式之中是不可以写复杂运算,这时就需要用到计算属性。
计算属性为啥不用括号阔起来?
因为使用计算属性里的属性,实际上是默认调用该属性的get方法,因此无需使用括号,计算属性提供各种属性的getter方法和setter方法。
计算属性和函数的区别?
计算属性:计算属性会对计算的结果进行缓存,在计算的条件没有发生变化的情况下,每一次调用计算属性的属性值都直接访问缓存结果,而不需要重新计算。这样做,对复杂计算和大量的运算起到了很好的优化作用。
函数: 函数无论调用多少次,都会重新计算,影响性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
{{reverMessage}}
{{reverMessage}}
</div>
</body>
</html>
<scirpt>
var vm = new Vue({
el:"#app",
data:{
message:"hello clover!",
temp:""
},
computed:{
reverMessage(){
return this.message.split("").reverse().join("")
}
}
})
</script>