vue- 計算屬性

阿新 • • 發佈：2020-08-11

vue- 計算屬性

(1) 基礎例子

有的時候我們需要在模板中使用資料a，這個時候就需要用到表示式，但是有的地方我們需要對a資料進行一些簡單的處理後才能使用，那麼我們就會在表示式中寫一些js邏輯運算比如現在我們要實現num值2倍的計算，

<div id="app">
        <p><button @click="num++">點選</button></p>
        <p>num: {{num}}</p>
        <p>num*2: {{num*2}}</p>
        <p><input type="text" v-model='msg'></p>
    </div>

缺點：如果在很多地方都用到這個計算的話，後期修改起來就會比較麻煩

（2）封裝函式的方法

我們可以把多次操作的內容封裝成一個函式進行呼叫

   <p>方法：{{doubleNum()}}</p>

var vm = new Vue({
            el:"#app",
            data:{
                num:1,
            },
		methods:{
                doubleNum(){
                    return this.num*2 
                }
      	 }
      	 })

但是這個時候，只要vm中有資料變化，這個變化的資料可能和我們關注的資料無關，但是vm都會重新渲染模板，這個時候表示式中的方法就會重新執行，大大的影響效能

(3)通過watch監聽器實現此功能

watch可以監聽現有的資料的改變，然後當現有資料發生改變了，內部就會實現一些業務邏輯

<div id="app">
        <p><button @click="num++">點選</button></p>
        <p>watchNum: {{watchNum}}</p>
    </div>
<script>
  var vm = new Vue({
            el:"#app",
            data:{
                num:1,
                watchNum:''
            },
            watch:{
                //監聽num值的改變，一旦num發生變化了，就讓watchNum變成更改後的新值的2倍
                //在vm例項中設定watch屬性，在裡面通過鍵值對來設定一些監聽，鍵名為資料名，值可以是一個函				  數，這個函式在資料改變之後才會執行，兩個引數分別是更改前的值和更改後的值
                 // num:function(newValue,oldValue){
                 // this.watchNum = newValue*2
                 // }
                num:{
                   // 值還可以是一個方法名字，當資料改變的時候這個方法會執行
					//當資料為object的時候，object的鍵值對改變不會被監聽到（陣列的push等方法可以）,這個時候需要設定深度監聽：
                    immediate:true, //代表初始化的時候也讓其執行一次
                    handler:function(newValue){
                        this.watchNum = newValue*2
                    }
                }  
            }
        })
</script>

(4)computed計算屬性來實現

計算屬性的寫法是一個函式,但是在上面呼叫的時候千萬不能加括號呼叫。

會根據現有資料生成一個新的資料，並且兩者產生關聯，建立永久性快取。

並且當無關資料發生改變的時候，計算屬性內部不會重新計算，而是直接從快取裡面取資料即可

<div id="app">
        <p><button @click="num++">點選</button></p>
        <p>computedNum: {{computedNum}}</p>
    </div>
<script>
  var vm = new Vue({
            el:"#app",
            data:{
                num:1,
            },
            computed:{
                computedNum(){
                    console.log("計算屬性...")
                    return this.num*2 
                }
            }
        })
</script>

(5)computed VS watch區別

watch的監聽只是單個的監聽，每次監聽只能監聽一個變數的修改，不能同時監聽多個變數的同時更改。

而計算屬性computed可以依賴多個數據的變化（並且只跟它所依賴項進行關聯）

當需要在資料變化時執行非同步或開銷較大的操作時，只能選擇採用watch去實現。
計算屬性就是在例項配置項中通過computed來為vm設定一個新的資料，而這個新資料會擁有一個依賴（一條已經存在的資料），當依賴發生變化的時候，新資料也會發生變化
與方法的方式相比，它效能更高，計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。相比之下，每當觸發重新渲染時，呼叫方法將總會再次執行函式。
與watch相比，寫起來簡單，邏輯性更清晰，watch一般多用於，根據資料的變化而執行某些動作，而至於這些動作是在幹什麼其實無所謂，而計算屬性更有針對性，根據資料變化而更改另一個數據

計算屬性也擁有getter和setter，預設寫的是getter，設定setter可以當此計算屬性資料更改的時候去做其他的一些事情，相當於watch這個計算屬性

 <div id="app">
        <p>{{fullName}}</p>
        <input type="text" v-model="fullName">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                firstName:"zhang",
                lastName:"san"
            },
            computed:{
                fullName: {
                    get: function () {
                        return this.firstName + ' ' + this.lastName
                    },
                    set: function (newValue) {
                        var names = newValue.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[names.length - 1]
                    }
                }
            }
        })

    </script>