Vue計算屬性與偵聽器和過濾器超詳細介紹-Vue.js-PHP中文網

首頁

web前端

Vue.js

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 08, 2022 pm 04:38 PM

vue

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

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

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

1 .計算屬性

1.1 使用方法

概述：

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

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

使用：

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

<p id="app">
    <!-- 方法1：vue在使用时，不推荐在模板中来写过多的逻辑 -->
    <h3 id="nbsp-n-n-nbsp">{{ n1+n2 }}</h3>
    <!-- 方法2：对于一个计算结果，可能在当前的页面中，显示多个，显示几次就调用这个函数几次，性能会降低 -->
    <h3 id="nbsp-sum-nbsp">{{ sum() }}</h3>
    <h3 id="nbsp-sum-nbsp">{{ sum() }}</h3>
    <h3 id="nbsp-sum-nbsp">{{ sum() }}</h3>
</p>
<script>
    const vm = new Vue({
        el: &#39;#app&#39;,
        data: {
            n1: 1,
            n2: 2
        },
        methods: {
            sum() {
                console.log(&#39;sum --- methods&#39;);
                return this.n1 + this.n2
            }
        }
    })
</script>

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

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

<p id="app">
    <p>{{total}}</p>
    <p>{{total}}</p>
    <p>{{total}}</p>
</p>
<script>
    const vm = new Vue({
        el: &#39;#app&#39;,
        data: {
            n1: 1,
            n2: 2
        },
        // 计算[属性]
        computed: {
            // 调用时，直接写名称就可以，不用写小括号
            // 计算属性中的依赖项，可以是一个，也是可以N个,取决于你在计算属性中调用多少
            // 注：此方法中不能写异步
            // 简写 使用最多的写法
            total() {
                console.log(&#39;computed -- total&#39;)
                // 在计算属性中，调用了 n1和n2，则n1和n2就是它的依赖项，如果这两个依赖项，有一个发生改变，则它会重新计算，如果两个都没有发生改变，则第2之后调用，读取缓存中的数据
                return this.n1 + this.n2
            }
        },
        methods: {
            // 计算属性中的方法在 methods 中也可以调用
            sum() {
                console.log(&#39;sum --- methods&#39;, this.total);
                return this.n1 + this.n2
            }
        }
    })
</script>

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

注意：

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

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

<p id="app">
    <h3 id="nbsp-sum-nbsp">{{ sum() }}</h3>
    <h3 id="msg">{{msg}}</h3>
</p>
<script>
    const vm = new Vue({
        el: &#39;#app&#39;,
        data: {
            n1: 1,
            n2: 2,
            msg: &#39;&#39;
        },
        // 计算[属性]
        computed: {
            // 标准写法
            total: {
                // 简写只是实现的了标准写法中的get方法
                get() {
                    return this.n1 + this.n2
                },
                set(newVal) {
                    if (newVal > 10) {
                        this.msg = &#39;值有点的大&#39;
                    }
                }
            }
        },
        methods: {
            sum() {
                // 赋值只会触发标准方式中的set方法，然后你可以得到它，完成一些别的工作
                if (this.total > 6) {
                    this.total = 101
                }
                return this.n1 + this.n2
            }
        }
    })
</script>

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

注意：

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue学习使用</title>
        <!-- 第1步： 引入vue库文件 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 第2步：挂载点 -->
        <p id="app">
            <table border="1" width="600">
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item,index in carts">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="setNum(1,index)">+++</button>
                        <input type="number" v-model="item.num">
                        <button @click="setNum(-1,index)">---</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </table>
            <hr>
            <h3>
                合计：
                {{totalPrice}}
            </h3>
        </p>
        <!-- 第3步：实例化vue -->
        <script>
            const vm = new Vue({
                el: &#39;#app&#39;,
                data: {
                    carts: [
                        { id: 1, name: &#39;小米12pro&#39;, price: 1, num: 1 },
                        { id: 2, name: &#39;华为手机&#39;, price: 2, num: 1 },
                        { id: 3, name: &#39;水果手机&#39;, price: 3, num: 1 },
                    ]
                },
                methods: {
                    setNum(n, index) {
                        this.carts[index].num += n
                        this.carts[index].num = Math.min(3, Math.max(1, this.carts[index].num))
                    },
                    del(index) {
                        confirm(&#39;确定删除&#39;) && this.carts.splice(index, 1)
                    }
                },
                // 计算属性
                computed: {
                    totalPrice() {
                        return this.carts.reduce((prev, { price, num }) => {
                            // 依赖项
                            prev += price * num
                            return prev
                        }, 0)
                    }
                }
            })
        </script>
    </body>
</html>

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

#2. 偵聽器

概述：

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

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

使用：

標準寫法：

<p id="app">
    <p>
        <input type="text" v-model="username">
        <span>{{errorUsername}}</span>
    </p>
</p>
<script>
    const vm = new Vue({
        el: &#39;#app&#39;,
        data: {
            username: &#39;&#39;,
            errorUsername: &#39;&#39;
        },
        // 监听器，它用来监听data配置中的数据的变化，一但有变化，就会自动触发.默认情况下，初始化不触发
        // 在监听器中是可以得到this对象的
        // 监听器它的依赖项，只有一个，一对一
        // 监听器中可以写异步
        watch: {
            // 方法名或属性名 就是你要观察的data中的属性名称
            // 标准写法
            username: {
                // newValue 变化后的值;oldValue 变化前的值
                handler(newValue, oldValue) {
                    if (newValue.length >= 3) this.errorUsername = &#39;账号过长&#39;
                    else this.errorUsername = &#39;&#39;
                }
            }
        })
</script>

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

#注意：

在監聽器中是可以得到this物件的。
監聽器的依賴項，只有一個，一對一。
監聽器中可以寫入非同步（Ajax 或 setTimeout）。

簡寫：

<p id="app">
    <p>
        <input type="text" v-model="username">
        <span>{{errorUsername}}</span>
    </p>
</p>
<script>
    const vm = new Vue({
        el: &#39;#app&#39;,
        data: {
            username: &#39;&#39;,
            errorUsername: &#39;&#39;
        },
        watch: {
            username(newValue, oldValue) {
                if (newValue.length >= 3) this.errorUsername = &#39;账号过长&#39;
                else this.errorUsername = &#39;&#39;
            }
        }
    })
</script>

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

初始化時，啟用偵聽器寫入：

<p id="app">
    <p>
        <input type="text" v-model="username">
        <span>{{errorUsername}}</span>
    </p>
</p>
<script>
    const vm = new Vue({
        el: &#39;#app&#39;,
        data: {
            username: &#39;aaa&#39;,
            errorUsername: &#39;&#39;
        },
        watch: {
            // 方法名或属性名 就是你要观察的data中的属性名称
            // 标准写法
            username: {
                handler(newValue, oldValue) {
                    if (newValue.length >= 3) this.errorUsername = &#39;账号过长&#39;
                    else this.errorUsername = &#39;&#39;
                },
                // 初始时，执行1次 --- 一般情况下，不启用  只有在标准写法下面，才有此配置
                immediate: true
            }
        })
</script>

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

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

监听对象中的属性变化：

<p id="app">
    <p>
        <input type="number" v-model.number="user.id"> 
    </p>
</p>
<script>
    const vm = new Vue({
        el: &#39;#app&#39;,
        data: {
            user: { id: 100, name: &#39;aaa&#39; }
        },
        // 监听对象中的指定的属性数据的变化  推荐如果你监听的是一个对象中数据变化，建议这样的方式
        watch: {
            &#39;user.id&#39;(newValue, oldValue){
                console.log(newValue, oldValue);
            }
        }
    })
</script>

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

监听对象变化：

<p id="app">
    <p>
        <input type="number" v-model.number="user.id"> 
    </p>
</p>
<script>
    const vm = new Vue({
        el: &#39;#app&#39;,
        data: {
            user: { id: 100, name: &#39;aaa&#39; }
        },
        watch: {
            // 监听对象,只能使用标准方式来写
            // 监听对象变化，它的前后值是一样的，无法区分
            user: {
                // 深度监听
                deep: true,
                handler(newValue, oldValue) {
                    console.log(newValue, oldValue);
                },
            }
        }
    })
</script>

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

注意：

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

3. 过滤器

概述：

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

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

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

定义全局过滤器：

<p id="app">
    <h3 id="nbsp-phone-nbsp-nbsp-phoneCrypt-nbsp">{{ phone | phoneCrypt }}</h3>
</p>
<script>
    // 参数1：过滤器的名称，可以随意起名
    // 参数2：回调函数，回调函数中的参数最少要有一个，第1位参数，永远指向为要过滤的数据
    Vue.filter(&#39;phoneCrypt&#39;, value => {
        return value.slice(0, 3) + &#39;~~~~&#39; + value.slice(7)
    })
    const vm = new Vue({
        el: &#39;#app&#39;,
        data: {
            phone: &#39;13523235235&#39;
        }
    })
</script>

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

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

<p id="app">
    <!-- 这里传的第一个参数,对应全局过滤器的回调函数中定义的第二个参数 -->
    <h3 id="nbsp-phone-nbsp-nbsp-phoneCrypt-nbsp">{{ phone | phoneCrypt(&#39;!!!!&#39;) }}</h3>
</p>
<script>
    Vue.filter(&#39;phoneCrypt&#39;, (value, salt = &#39;****&#39;) => {
        return value.slice(0, 3) + salt + value.slice(7)
    })
    const vm = new Vue({
        el: &#39;#app&#39;,
        data: {
            phone: &#39;13523235235&#39;
        }
    })
</script>

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

定义局部过滤器：

<p id="app">
    <h3 id="nbsp-phone-nbsp-nbsp-phoneCrypt-nbsp">{{ phone | phoneCrypt(&#39;!!!!&#39;) }}</h3>
</p>
<script>
    const vm = new Vue({
        el: &#39;#app&#39;,
        data: {
            phone: &#39;13523235235&#39;
        },
        // 局部过滤器
        filters:{
            phoneCrypt(value, salt = &#39;****&#39;){
                return value.slice(0, 3) + salt + value.slice(7)
            }
        }
    })
</script>

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

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

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

陳述

本文轉載於：脚本之家。如有侵權，請聯絡admin@php.cn刪除

vue.js和React：了解關鍵差異Apr 10, 2025 am 09:26 AM

Vue.js適合小型到中型項目，而React更適用於大型、複雜應用。 1.Vue.js的響應式系統通過依賴追踪自動更新DOM，易於管理數據變化。 2.React採用單向數據流，數據從父組件流向子組件，提供明確的數據流向和易於調試的結構。

vue.js vs.反應：特定於項目的考慮因素Apr 09, 2025 am 12:01 AM

Vue.js適合中小型項目和快速迭代，React適用於大型複雜應用。 1)Vue.js易於上手，適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富，適合有高性能需求和復雜功能需求的項目。

vue怎麼a標籤跳轉Apr 08, 2025 am 09:24 AM

實現 Vue 中 a 標籤跳轉的方法包括：HTML 模板中使用 a 標籤指定 href 屬性。使用 Vue 路由的 router-link 組件。使用 JavaScript 的 this.$router.push() 方法。可通過 query 參數傳遞參數，並在 router 選項中配置路由以進行動態跳轉。

vue怎麼實現組件跳轉Apr 08, 2025 am 09:21 AM

Vue 中實現組件跳轉有以下方法：使用 router-link 和 <router-view> 組件進行超鏈接跳轉，指定 :to 屬性為目標路徑。直接使用 <router-view> 組件顯示當前路由渲染的組件。使用 router.push() 和 router.replace() 方法進行程序化導航，前者保存歷史記錄，後者替換當前路由不留記錄。

vue的div怎麼跳轉Apr 08, 2025 am 09:18 AM

Vue 中 div 元素跳轉的方法有兩種：使用 Vue Router，添加 router-link 組件。添加 @click 事件監聽器，調用 this.$router.push() 方法跳轉。

vue跳轉怎麼傳值Apr 08, 2025 am 09:15 AM

Vue 中數據傳遞有兩種主要方式：props：單向數據綁定，從父組件傳遞數據給子組件。事件：使用事件和自定義事件在組件之間傳遞數據。

vue引入方式怎麼跳轉Apr 08, 2025 am 09:12 AM

Vue.js提供了三種跳轉方式：原生 JavaScript API：使用 window.location.href 進行跳轉。 Vue Router：使用 <router-link> 標籤或 this.$router.push() 方法進行跳轉。 VueX：通過 dispatch action 或 commit mutation 來觸發路由跳轉。