Vue.js的计算属性
2019-09-27 本文已影响0人
CodeMT
一、起因？
虽然在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。比如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
-
这样，模板不再简单和清晰。在实现反向显示
message之前，你应该通过一个函数确认它。所以，Vue.js提供了计算属性来让我们去处理实例中的复杂逻辑。 -
计算属性 (computed properties) 就是不存在于原始数据中，而是在运行时实时计算出来的属性。
案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</title>计算属性</title>
</head>
<body>
<div id="app">
<p>{{fullname}}</p>
<p>{{reverse}}</p>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
firstname:'张',
lastname:'三丰'
},
// 计算属性选项
computed:{
fullname:function(){
return this.firstname + this.lastname;
},
reverse:function(){
return (this.firstname + this.lastname).split(' ').reverse().join(' ');
}
}
})
</script>
</body>
</html>
- 在上面的案例中，计算属性
fullname和reverse的值始终取决于firstname和lastname。计算属性默认只有getter，当然在需要时我们也可以提供一个setter。计算属性被设计出来的目的在于：getter是干净无副作用的。
二、计算属性 和 Methods的区别？
当页面重新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用，适合较大量的计算和改变频率较低的属性；而
method，就是当页面重新渲染的时候（页面元素的data变化，页面就会重新渲染），都会重新调用method。
如果不希望有缓存，我们可以用method取代computed。
疑惑：为什么需要缓存？
- 假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！
三、计算属性的setter方法
计算属性默认只有
getter，不过在需要时你也可以提供一个setter：
<body>
<div id="app">
<p>{{fullName}}</p>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
firstName:'Tom',
lastName:'jack'
},
computed:{
fullName:{
// get方法
get:function(){
return this.firstName + ' ' + this.lastName
}
// setter方法
set:function(newValue){
var names = newValus.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
})
</script>
</body>
运行结果：
