10. 9. Vue 計算屬性的setter和getter 以及 計算屬性的緩存講解

之前寫的計算屬性是這樣的：

<div id="app">
    <p>計算屬性傳回的值：{{text}}</p>
</div>

<script>
    const app = new Vue({
        el:"#app",
        computed:{
            text:function (){
                return "Hello BiHu!"
            }
        }
    })
</script>      

因為之前也說過 計算屬性裡面的命名不要加set 或 set 動詞：

其實我們以前寫的都是簡寫，完全模式如下：

computed 它的值是一個對象，是以呢 其實每一個 計算屬性的值都有set 和 get 方法【這就是為什麼不用加括号的原因，因為調用的是一個對象】，隻是呢，預設Vue都是調用他的get方法 ，

是以呢一般我們寫的那些匿名函數也将會歸類于get 方法 ，一般set方法都不寫，下面代碼是完全模式的計算屬性寫法：

<script>
    const app = new Vue({
        el: "#app",
        data: {
            hello:"歡迎",
            name:"BiHu",
        },

        computed: {
            //computed的值： 【是一個對象】,每一個都有set 和 get 方法：
            text: {
                //set方法
                set(name) {
                    this.name = name;
                },
                //get方法
                get() {
                    return this.hello + " - " + this.name;
                },
            }
        }
    })
</script>      

運作結果：

計算屬性傳回的值：歡迎 - BiHu      

是以呢 Vue每次預設都是調用的是 get 方法 ，每次都是哦，那麼怎麼觸發set方法呢？ 用響應式的那種修改text即可，比如：

app.text = "a";      

是以呢 a 會當做set方法的形式參數傳入，然後修改data中 name 的值為 a，就會打列印如下：

計算屬性傳回的值：歡迎 - a      

緩存也是如此 隻有修改了 代碼才會更新，上篇講過，

希望大家懂得 調用計算屬性 其實是調用一個對象，對象裡面兩個方法 一個是 set  一個是get

是以呢 為什麼說計算屬性是有緩存的呢，因為這是他本來就有的：

computed 計算屬性 和 methods 的差別：

當你有這麼一個Vue 代碼段： 【c 和 m 都是循環】：

<script>
    const app = new Vue({
        el: "#app",
        data: {
            value:"歡迎",
        },
        methods:{
            mLoop:function (){
                let v = "mLoop : ";
                for (let i = 0;i < 5;i++){
                    v += i;
                    console.log("我執行了一次mLoop");
                }
                return v;   //01234
            }
        },
        computed:{
            cLoop:function (){
                let v = "cLoop ： ";
                for (let i = 0;i < 5;i++){
                    v += i;
                    console.log("我執行了一次cLoop");
                }
                return v;   //01234
            }
        }
    })      

那麼 如果每次調用methods 中的mLoop方法呢 就會每次都循環5次 然後傳回v，如果是調用computed 中的 變量cLoop呢 隻會循環第一次 5 次，後面再調用隻傳回v，

這就是計算屬性的緩存除非你去響應式的修改值，那時候就會有調用一次完全代碼，以後又是隻執行return 語句，原理自己研究吧.

<div id="app">
            <p>{{mLoop()}}</p>
            <p>{{mLoop()}}</p>
            <p>{{mLoop()}}</p>
                <!--分别調用三次 然後看控制台輸出-->
            <p>{{cLoop}}</p>
            <p>{{cLoop}}</p>
            <p>{{cLoop}}</p>
</div>      

控制台：

好了就到這了啊