計算屬性 1.1 什麼是計算屬性: 插值表達式常用於簡單的運算,當其過長或邏輯複雜時,會難以維護,這時應該使用計算屬性。 插值表達式里的值是JS表達式 所有的計算屬性都以函數的形式寫在Vue實例內的computed選項內,最終返回計算後的結果。 1.2 計算屬性的用法 在一個計算屬性里可以完成各種復 ...
計算屬性
1.1 什麼是計算屬性:
插值表達式常用於簡單的運算,當其過長或邏輯複雜時,會難以維護,這時應該使用計算屬性。
插值表達式里的值是JS表達式
所有的計算屬性都以函數的形式寫在Vue實例內的computed選項內,最終返回計算後的結果。
<!--
將123,456 值反轉 456,123
-->
<div id="app">
<!-- 插值表達式用法 -->
{{ text.split(',').reverse().join(',') }}
<!-- 插值表達式用法 -->
<!-- 計算屬性用法 -->
{{ reversedText }}
<!-- 計算屬性用法 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
text:'123,456'
},
computed: {
reversedText:function(){
return this.text.split(',').reverse().join(',');
}
},
});
</script>1.2 計算屬性的用法
在一個計算屬性里可以完成各種複雜的邏輯,包括運算、函數等,只要最終返回一個結果就可以。
計算屬性可以以來多個Vue實例的數據,只要其中任一數據變化,計算屬性就會重新執行,視圖也會更新。
<div id="app">
總價:{{ prices }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
package1:[
{
name:'iPhone 7',
price:7199,
count:2
},
{
name:'iPad',
price:2888,
count:1
},
{
name:'iPhone 7 Plus',
price:8239,
count:5
}
],
package2:[
{
name:'apple',
price:3,
count:5
},
{
name:'banana',
price:2,
count:10
}
]
},
computed: {
prices:function(){
let prices = 0;
for(let i = 0;i<this.package1.length;i++){
prices += this.package1[i].price * this.package1[i].count;
}
for(let i = 0;i<this.package2.length;i++){
prices += this.package2[i].price * this.package2[i].count;
}
return prices;
}
},
});
</script>我們在控制台 vm.package1[0].count = 3; 總價的值就會相應的改變
每一個計算屬性都包含一個getter和一個setter,上面都是計算屬性的預設用法,只是利用了getter來讀取。
<div id="app">
姓名:{{ fullName }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
firstName:'Jack',
lastName:'Green'
},
computed: {
fullName:{
get:function(){
return this.firstName+' '+this.lastName;
},
set:function(newValue){
let names = newValue.split(' ');
this.firstName = names[0];
this.lastName =names[names.length - 1];
}
}
},
});
</script>在你需要時,也可以提供一個setter函數,當手動修改計算屬性的值就像修改一個普通數據那樣時,就會觸發setter函數,執行一些自定義的操作。
app.fullName = 'Ross Joe';
<div id="app">
姓名:{{ fullName }}
複姓:{{ FXName }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
firstName:'Jack',
lastName:'Green'
},
computed: {
fullName:{
get:function(){
return this.firstName+' '+this.lastName;
},
set:function(newValue){
let names = newValue.split(' ');
this.firstName = names[0];
this.lastName =names[names.length - 1];
}
},
FXName:function(){
return 'zhuge '+this.fullName;
}
},
});
</script>計算屬性可以依賴其他計算屬性
<div id="app1">
</div>
<div id="app2">
{{ reversedText }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app1 =new Vue({
el:'#app1',
data:{
text:'123,456'
}
});
var app2 =new Vue({
el:'#app2',
computed: {
reversedText:function(){
return app1.text.split(',').reverse().join(',');
}
},
});
</script>計算屬性可以依賴當前Vue實例的數據,還可以依賴其他實例的數據
這樣的用法在組件和組件話里會用到
1.3 計算屬性緩存
<div id="app">
<!-- 插值表達式用法 -->
{{ text.split(',').reverse().join(',') }}
<!-- 插值表達式用法 -->
<!-- 計算屬性用法 -->
{{ reversedText }}
<!-- 計算屬性用法 -->
<!-- 方法用法 -->
{{ reversedMText() }}
<!-- 方法用法 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
text:'123,456'
},
methods:{
reversedMText(){
return this.text.split(',').reverse().join(',');
}
},
computed: {
reversedText:function(){
return this.text.split(',').reverse().join(',');
}
}
});
</script>methods里的方法與計算屬性起到同樣的作用，但是計算屬性是基於它的依賴緩存的。一個計算屬性所依賴的數據發生變化時,它才會重新取值。methods則不同,只要重新渲染,它就會被調用,因此函數也會被執行。
使用計算屬性還是methods取決於你是否需要緩存，當遍歷大數組和做大量計算時,應當使用計算屬性,除非你不希望得到緩存
參考:Vue.js實戰
