Vue中Computed和Watch的用法及區別-js教程-PHP中文網

首頁

web前端

js教程

Vue中Computed和Watch的用法及區別

angryTom

Feb 07, 2020 pm 05:37 PM

js vue 監聽屬性計算屬性

本篇文章介紹了vue中的計算屬性computed和監聽屬性watch的區別，希望對學習vue前端框架的同學有幫助！

Vue中Computed和Watch的用法及區別

一、計算屬性（computed）

1. 計算屬性是為了模板中的表達式簡潔，易於維護，符合用於簡單運算的設計初衷。

例如：

<p id="app">
        {{ myname.substring(0,1).toUpperCase() + myname.substring(1) }} 
</p>

登入後複製

運算過於複雜，冗長，且不好維護，因此我們對於複雜的運算應該使用計算屬性的方式去書寫。

因此可改寫為：

<body>
    <div id="app">
        {{ changewords }} // 渲染 不用写()
    </div>
</body>
<script>
    var vm = new Vue({
            el: "#app",
            data:{},
    　　　　　// 计算属性
            computed:{
                changewords(){
                    return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
                }
            }
     })
</script>

登入後複製

總結：

1.變數不在data中定義，而是定義在computed中，寫法跟寫方法一樣，有回傳值。函數名稱直接在頁面模板中渲染，不加小括號。

2.根據傳入的變數的變化進行結果的更新。

3.計算屬性是基於響應式依賴進行快取。如其中的任意一個值未發生變化，它調用的就是上一次計算緩存的數據，因此提高了程式的效能。而methods中每調用一次就會重新計算　一次，為了進行不必要的資源消耗，選擇用計算屬性。

計算屬性模糊查詢的例子：

<body>
    <div id="app">
        <input type="text" v-model="mytext">
        <ul>
            <li v-for="data in datalistcom" :key="data">
                {{ data }}
            </li>
        </ul>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],
            mytext:&#39;&#39;
        },
        computed:{
            datalistcom(){
                return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
            }
        }
    })
</script>

登入後複製

二、監聽屬性（watch）

上面說到計算屬性的時候初始化的時候就可以被監聽到並且計算但是watch是改變的時候才會觸發。

當你有一些資料需要隨著其它資料變動而變動時，或者當需要在資料變更時執行非同步或開銷較大的操作時，你可以使用 watch。

範例：

<body>
    <div id="app">
        <p>单价：<input type="text" v-model="price"></p>
        <p>数量：<input type="text" v-model="number"></p>
        <p>计算金额：{{sum}}</p>
    </div>
</body>
<script>
var vm  = new Vue({
    el:"#app",
    data:{
        price:100,
        number:1,
        sum:0
    },
    //监听某一个值或者状态发生变化 变化就会触发watch 
    watch:{
        // 监听的参数的名字要一致
        price(){
            console.log(this.price)
            if(this.price*this.number < 1000 && this.price*this.number > 0){
                this.sum = this.price*this.number + 100
            }else{
                this.sum = this.price*this.number
            }
        },
        number(){
            console.log(this.price)
            if(this.price*this.number < 1000 && this.price*this.number > 0){
                this.sum = this.price*this.number + 100
            }else{
                this.sum = this.price*this.number
            }
        }
    }
})
</script>

登入後複製

計算屬性與屬性監聽的差異：

1.計算屬性變數在computed中定義，屬性監聽在data中定義。

2.計算屬性是聲明式的描述一個值依賴了其他值，依賴的值改變後重新計算結果更新DOM。屬性監聽的是定義的變量，當定義的值改變時，執行相對應的函數。

以上是Vue中Computed和Watch的用法及區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7797

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1234

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

vue怎麼給按鈕添加函數 Apr 08, 2025 am 08:51 AM

可以通過以下步驟為 Vue 按鈕添加函數：將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。

vue中的watch怎麼用 Apr 07, 2025 pm 11:36 PM

Vue.js 中的 watch 選項允許開發者監聽特定數據的變化。當數據發生變化時，watch 會觸發一個回調函數，用於執行更新視圖或其他任務。其配置選項包括 immediate，用於指定是否立即執行回調，以及 deep，用於指定是否遞歸監聽對像或數組的更改。

vue多頁面開發是啥意思 Apr 07, 2025 pm 11:57 PM

Vue 多頁面開發是一種使用 Vue.js 框架構建應用程序的方法，其中應用程序被劃分為獨立的頁面：代碼維護性：將應用程序拆分為多個頁面可以使代碼更易於管理和維護。模塊化：每個頁面都可以作為獨立的模塊，便於重用和替換。路由簡單：頁面之間的導航可以通過簡單的路由配置來管理。 SEO 優化：每個頁面都有自己的 URL，這有助於搜索引擎優化。