首頁 >web前端 >js教程 >Vue中Computed和Watch的用法及區別

Vue中Computed和Watch的用法及區別

angryTom原創: 2020-02-07 17:37:272130瀏覽

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

一、計算屬性（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

上一篇：js產生1到100的隨機數下一篇：js產生1到100的隨機數

看更多