初學Vue計算屬性

計算屬性

一、計算屬性（computed）

a、基礎例子

【案例】

<div id="app">
    {{jisuan}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"基礎例子和計算setter"
        },
        computed: {
            jisuan:function(){
                return this.msg.split('').reverse().join('');
            }
        }
    });
</script>
打印結果:rettes算計和子例礎基

b、計算屬性的緩存 vs method 方法

咱們能夠將同一函數定義爲一個 method 而不是一個計算屬性。對於最終的結果，兩種方式確實是相同的。然而，不一樣的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要 message 尚未發生改變，屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

計算屬性緩存依賴於數據模型中的屬性，若是模型中的屬性不改變它的緩存就不改變，若是數據模型中的屬性發生改變則在計算一遍

method無論你數據模型中的屬性是否改變都有執行

【案例】

<div id="app">
    {{jisuan}}</br>
    {{jisuan}}</br>
    {{jisuan}}</br>
    ***************************</br>
    {{bujisuan()}}</br>
    {{bujisuan()}}</br>
    {{bujisuan()}}</br>
</div>
<script>
    var a=100;
    var b=100;
    var app = new Vue({
        el:"#app",
        data:{
            msg:"基礎例子和計算setter"
        },
        computed: {
            jisuan:{
                get:function(){
                    a++;
                    return a;
                },
                set:function(newValue){
                    this.msg=newValue.split('').reverse().join('');
                }
            }
        },
        methods: {
            bujisuan:function(){
                b++;
                return b;
            }
        }
    });
</script>
打印結果以下圖

相比之下每當觸發從新渲染時，method 調用方式將老是再次執行函數而計算屬性不須要，每次調用緩存裏面就行

c、計算屬性 vs Watched 屬性

watch 屬性當你有一些數據須要隨着其它數據變更而變更時

【watch案例】

<div id="app">
    <input v-model = "lastName" >
    <input v-model = "firstName" >
    {{ fullName }}
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '健',
            lastName: '吳',
            fullName: '吳健'
        },
        watch: {
            firstName: function (val) {
                this.fullName = this.lastName + val
            },
            lastName: function (val) {
                this.fullName = val + this.firstName
            }
        }
    });
</script>
結果以下圖

【計算屬性案例】

<div id="app">
    <input v-model = "lastName" >
    <input v-model = "firstName" >
    {{ quanming }}
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '健',
            lastName: '吳'
        },
        computed: {
            quanming:{
                get:function(){
                    return this.lastName + this.firstName
                }
            }
        }
    });
</script>
結果以下圖

d、計算 setter

計算 setter有2個函數，默認getter

getter函數 [get] 和 setter函數 [set]

get()方法爲獲取

【案例】

<div id="app">
    {{jisuan}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"基礎例子和計算setter"
        },
        computed: {
            jisuan:{
                get:function(){
                    return this.msg.split('').reverse().join('');
                }
            }
        }
    });
</script>
打印結果爲：rettes算計和子例礎基

set()方法爲設置

【案例】

<div id="app">
    {{jisuan}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"基礎例子和計算setter"
        },
        computed: {
            jisuan:{
                get:function(){
                    return this.msg.split('').reverse().join('');
                },
                set:function(newValue){
                    this.msg=newValue.split('').reverse().join('');
                }
            }
        }
    });
    app.jisuan = "我在設置值"
</script>
打印結果爲：我在設置值

二、觀察watchers

在何時用

當你想要在數據變化響應時，執行異步操做或開銷較大的操做，這是頗有用的

【案例】

<div id="app">
    {{msg}}
    <input v-model="msg"/>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:""
        },
        watch:{
            msg:function(newValue){
                localStorage.getItem("msg",newValue);
            }
        },
        mounted:function(){
            this.msg = localStorage.getItem("msg");
        }
    });
</script>

喜歡的朋友別忘了點贊加收藏