技術標籤：Vue學習記錄vuejsjavascriptcsshtml5

vue學習記錄-04 動態繫結屬性

這篇文章是根據codewhy老師在b站的視訊進行的學習記錄

文章目錄

• vue學習記錄-04 動態繫結屬性
• 一、計算屬性的基本使用
• 二、計算屬性的複雜操作
• 三、計算屬性的setter和getter
• 四、計算屬性和methods的對比

一、計算屬性的基本使用

我們知道，mustache語法支援簡單的運算的。

        <h2>{{firstName+' '+lastName}}</h2>
        <h2>{{firstName}} {{
 
lastName}}</h2>

現在看起來現在僅僅只是將兩個資料進行一個拼接，但是如果之後有什麼比較複雜的資料處理，需要在mustache中放入過多的表示式進行運算才能使用，那麼自然是不利於程式設計師維護的。
下面也僅僅只是一個自我介紹時用到的簡單的字串拼接，想想如果還要再加上各種方法呢？

        <h2>{{firstName+' '+lastName+'myage:'+age+'歲'+'...(這人自我介紹挺囉嗦的，中間省略200字)'+'，自我介紹結束'}}</h2>

因此，在mustache中只需要表達出這裡放的是什麼東西就足夠了，如果資料需要進行處理才能放入mustache中，那麼VUE建議使用計算屬性進行處理後再使用。

<h2>{{fullName}}</h2>

data: {
                firstName:'Lebron',
                lastName:'James'
            },
computed:{
                fullName:function(){
                    return this.firstName+' '+this.lastName
                }
            },

我們使用計算屬效能做的事使用方法也是可以實現的。

<
 
h2>{{getFullName()}}</h2>

methods:{
                getFullName(){
                    return this.firstName+' '+this.lastName
                }
            }

與方法不同，計算屬性僅僅只是一個屬性而不是一個要執行的動作，因此，計算屬性我們在命名時最好使用名詞，而不是動詞。
計算屬性與methods方法還有一些其他方面的不同，文章後面我們將會進行對比。

二、計算屬性的複雜操作

計算屬性可以進行一些更復雜的操作，我們拿個案例進行演示。
假設現在有一個書店收銀系統，其他的功能都做好了，只剩一個計算全部書籍價格的小功能，組長把這個功能交給我們去實現，那麼我們需要怎麼做呢？
程式碼如下：

<div id='app'>
        <h2>總價格：{{totalPrice}}</h2>
    </div>

const app = new Vue({
            el: '#app',
            data: {
                books:[
                    {id:110,name:"VUE",price:119},
                    {id:111,name:"Linux",price:159},
                    {id:112,name:"JAVA",price:419},
                    {id:113,name:"GIT",price:24},
                ]
            },
        computed:{
			totalPrice(){
				？
			}
		}    
 })

我們應該怎麼實現totalPrice呢？
當然是將顧客買的書的價格全部加在一起。

	this.books[0].price+this.books[1].price+this.books[2].price+this.books[3].price

這樣雖然是可以，但是程式碼很不靈活，畢竟不可能每次都只買這些書吧？除非書店只有這四本書買的同時要求顧客必須一起買（比如老師要求買教材資料？）。

所以我們可以使用for迴圈對books的價格進行求和。

	let result=0
    for(let i=0;i<this.books.length;i++){
        result +=this.books[i].price
    }
    return result

或者使用for…in迴圈，這樣我們可以很方便的通過鍵名獲取鍵值進行額外的操作。

	let result=0;
    for(let i in this.books){
         result +=this.books[i].price
     }
     return result

在ES6中，支援使用for of迴圈直接獲取鍵值。

     let result=0;
     for(let book of this.books){
         result +=book.price
     }
     return result

前面提到過，計算屬性中也可以使用方法函式，所以要實現這個功能，最簡單的方法還是使用reduce方法。

	return this.books.reduce((prev, cur) => prev+cur.price,0)

關於reduce方法：
寫法：陣列.reduce(callback,initialValue)
callback:一個回撥函式，作用是執行陣列中每個值的函式，包含四個引數
1、previousValue （上一次呼叫回撥返回的值，或者是提供的初始值（initialValue））
2、currentValue （陣列中當前被處理的元素）
3、index （當前元素在陣列中的索引）
4、array （呼叫 reduce 的陣列）
initialValue：即初始值，第一次呼叫callback時使用的值

三、計算屬性的setter和getter

計算屬性本質上是一個屬性而非函式，所以作為一個屬性，它是有setter方法和getter方法的，不過我們通常預設計算屬性是隻讀的，所以基本上我們不會去實現的他的setter方法，只會作為getter方法去實現，這個作為了解即可。
簡潔寫法（不包含setter方法）：

<div id='app'>
        {{fullName}}
    </div>

const app = new Vue({
            el: '#app',
            data: {
                firstName:'Kobe',
                lastName:'Bryant'
            },
            computed:{
                fullName:function(){
                    return this.firstName+' '+this.lastName
                }
            }
        })

同時，在呼叫計算屬性時，由於它不是函式，所以不需要再在後面加小括號

計算屬性完整寫法（包含setter方法）：

fullName:{
    //計算屬性一般沒有set方法，即只讀屬性，不希望改變屬性
    // set:function(){},
    set:function(newValue){
        console.log('傳入引數:',newValue);
        const names=newValue.split(' ');
        this.firstName=names[0];
        this.lastName=names[1];
    },
    //一般只需要使用get方法
    get:function(){
        return this.firstName+' '+this.lastName
    }
}

四、計算屬性和methods的對比

關於計算屬性與methods的對比，首先我們需要回想起來，我們為什麼要使用計算屬性？
如果直接在html拼接資料，語法會過於繁瑣，而且html不要在寫過多邏輯處理。

        <h2>{{firstName+'這裡是一堆亂七八糟的邏輯處理'+lastName}}</h2>

那麼計算屬性與methods有什麼不同呢？換句話說，既然methods能做到跟計算屬性一樣的事，那麼為什麼VUE還要專門寫一個計算屬性呢？
先簡單說下結論：計算屬性效能更優，methods效能更低。
下面直接放程式碼：

<div id='app'>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>

        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
    </div>

        const app = new Vue({
            el: '#app',
            data: {
                firstName:'Kobe',
                lastName:'Bryant'
            },
            methods:{
                getFullName:function(){
                    console.log("getFullName");
                    return this.firstName+' ' +this.lastName
                }
            },
            computed:{
                fullName:function(){
                    console.log("fullName");
                    return this.firstName+' '+this.lastName
                }
            }
        })

在控制檯中，我們可以看到，getFullName列印了四次，而fullName只打印了一次：

為什麼呢？

因為通過定義methods實現的資料處理，呼叫了幾次就會執行幾次，每次都會重新計算，效能更低。
而通過計算屬性實現資料處理，只會呼叫一次，因為VUE做了快取，會觀察資料是否有變化，沒有變化就不會呼叫，效能更優。