Vue之計算屬性Computed和屬性監聽Watch，Computed和Watch的區別

時間 2020-02-08

標籤 vue 計算屬性 computed 監聽 watch 區別简体版

原文原文鏈接

1、計算屬性（computed）緩存

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

　　例如：異步

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

　　運算過於複雜，冗長，且很差維護，所以咱們對於複雜的運算應該使用計算屬性的方式去書寫。函數

　　所以可改寫爲：性能

<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>

總結：this

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

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

　　3.計算屬性基於響應式依賴進行緩存。如其中的任意一個值未發生變化，它調用的就是上一次計算緩存的數據，所以提升了程序的性能。而methods中每調用一次就會從新計算　一次，爲了進行沒必要要的資源消耗，選擇用計算屬性。code

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

<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:''
        },
        computed:{
            datalistcom(){
                return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
            }
        }
    })
</script>

2、監聽屬性（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>