vue學習小記

計算屬性緩存 和方法不一樣點

方法：

在控制檯中改變app7.message的值，方法就會執行

html：結構

<div id="app7">
    <p>{{message}}</p>
    <p>{{message__()}}</p>
</div>

js：

var app7=new Vue({
        el:"#app7",
        data:{
            message:"原來的信息"
        },
        computed:{
            message_:function(){
                return Date.now()  //沒有對其餘部分產生依賴
            }
        },
        methods:{
            message__:function () {
                return Date.now()
            }
        }
    })

屬性：

在控制檯中改變app7.message的值，計算屬性都不會變，不會再次執行，由於該計算屬性沒有對其餘東西產生依賴

html結構：

<div id="app7">
    <p>{{message}}</p>
    <p>{{message_}}</p>
</div>

js：同上

每次引發重繪（例如：app7.message的改變），方法message__都會執行；

若是計算屬性沒有對其餘東西（例如app7.message）產生依賴，則會保持第一次結果，不會再次執行； 若是對其餘產生依賴，每當該依賴的東西發生變化，則該計算屬性就會再次執行一次

借鑑vue官網的話：計算屬性是基於它們的依賴進行緩存的

若是把js改爲：計算屬性對app7.message產生依賴，app7.message發生變化，則計算屬性則會再次執行

var app7=new Vue({
        el:"#app7",
        data:{
            message:"原來的信息"
        },
        computed:{
            message_:function(){
                return this.message  
            }
        },
        methods:{
            message__:function () {
                return Date.now()
            }
        }
    })