Vue計算屬性與偵聽器和過濾器超詳細介紹

本篇文章為大家帶來了關於vue的相關知識，其中主要介紹了關於計算屬性與偵聽器和過濾器的詳細介紹，包括了購物車合計使用計算屬性等內容，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、vue.js教學】

1 .計算屬性

1.1 使用方法

概述：

模板中放入太多的邏輯會讓模板過重且難以維護，使用計算屬性可以讓模板變得簡潔易於維護。計算屬性是基於它們的響應式依賴進行緩存的，計算屬性比較適合對多個變量或者對象進行處理後返回一個結果值，也就是數多個變量中的某一個值發生了變化則我們監控的這個值也就會改變。

計算屬性定義在Vue物件中，透過關鍵字computed屬性物件定義一個個函數，並傳回一個值，使用計算屬性時和data中的資料使用方式一致。

使用：

當不使用計算屬性時，我們想要計算模板中的結果，可以有以下幾種寫法：

    
    
{{ n1+n2 }}
    
    
{{ sum() }}
    
{{ sum() }}
    
{{ sum() }}

如果對於一個結果，進行計算，可以使用vue提供計算屬性來完成，而且計算屬性它還具有快取功能。如果你的依賴項，沒有發生改變，則它會在再一次呼叫時，會讀取快取中的資料。

    
{{total}}
    
{{total}}
    
{{total}}

注意：

• 計算屬性在呼叫時，在範本中直接寫名稱就可以，不用寫小括號。
• 在計算屬性中，呼叫了n1和n2，則n1和n2就是它的依賴項，如果這兩個依賴項，有一個發生改變，則它會重新計算，如果兩個都沒有發生改變，則第2之後調用，讀取快取中的資料。這也就是為什麼上面計算了3次，卻只呼叫了一次計算方法，因為計算屬性中的依賴項沒有改變。
• 計算屬性中的依賴項，可以是一個，也是可以N個，取決於你在計算屬性中呼叫多少。
• 計算屬性中的方法中不能寫非同步。
• 上面計算屬性，是簡寫。簡寫是使用最多的方法。
• 計算屬性不僅可以在模板中調用，也可以在 method 中調用。

如果定義的計算屬性，為簡寫方式，則給計算屬性賦值時，會報錯。只有標準的寫法時，它才可以對於計算屬性進行賦值運算。下面我們就來看標準寫法是怎麼樣的。

    
{{ sum() }}
    
{{msg}}

注意：

• 簡寫方式只是實作的了標準寫法中的get方法。
• 賦值只會觸發標準方式中的set方法，然後你可以得到新的值，完成一些其他的工作。

1.2 案例-購物車總計使用計算屬性

    
        
        
        
        
        
        
    

    
        
        

            

                

                    
序号
                    
名称
                    
单价
                    
数量
                    
操作
                
                

                    
{{index+1}}
                    
{{item.name}}
                    
{{item.price}}
                    

                        +++
                        
                        ---
                    
                    

                        删除
                    
                
            
            

            

                合计：
                {{totalPrice}}
            
        

        
        
    

#2. 偵聽器

概述：

使用watch來偵聽data中資料的變化,watch中的屬性一定是data 中已經存在的資料。

當需要監聽一個物件的改變時，普通的watch方法無法監聽到物件內部屬性的改變，只有data中的資料才能夠監聽到變化，此時就需要deep屬性對物件進行深度監聽。

使用：

標準寫法：

    

        
        {{errorUsername}}
    

#注意：

##監聽器用來監聽data配置中的資料的變化，一但有變化，就會自動觸發.預設情況下，初始化不觸發。
在監聽器中是可以得到this物件的。
監聽器的依賴項，只有一個，一對一。
監聽器中可以寫入非同步（Ajax 或 setTimeout）。

    

        
        {{errorUsername}}
    

    

        
        {{errorUsername}}
    

注意：这个配置只有在标准写法下才能有。

监听对象中的属性变化：

监听对象变化：

注意：

1. 监听对象，只能使用标准方式来写
2. 监听对象变化，它的前后值是一样的，无法区分

3. 过滤器

概述：

在数据被渲染之前，可以对其进行进一步处理，比如将字符截取或者将小写统一转换为大写等等，过滤器本身就是一个方法。

过滤器的作用就是为了对于界面中显示的数据进行处理操作。

过滤器可以定义全局或局部。

定义全局过滤器：

    
{{ phone | phoneCrypt }}

上面的全局过滤器的回调函数中只有一个参数，我们还可以定义多个参数：

    
    
{{ phone | phoneCrypt('!!!!') }}

定义局部过滤器：

    
{{ phone | phoneCrypt('!!!!') }}

【相关推荐：javascript视频教程、vue.js教程】

以上是Vue計算屬性與偵聽器和過濾器超詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！