Vue的計算屬性緩存computed和methods的區別

computed和methods的區別

計算屬性在處理一些複雜邏輯時是很有用的，當頁面需要渲染的時候，計算屬性不會發生變化，直接讀取使用，適合較大的計算和改變頻率較低的屬性

如果是methods的話，會造成性能的影響

就拿一個簡單的字符串反轉例子來說吧：

	<div id="app">
        <p>原本的字符串{{name}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                name:"Zhang San"
            },
            methods:{},
            computed:{}
        })
    </script>

此時頁面上輸出的是：

當我們使用函數來反轉這個字符串的時候：

	<div id="app">
        <p>原本的字符串{{name}}</p>
        <p>函數調用反轉字符串{{reverseStr()}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                name:"Zhang San"
            },
            methods:{
                reverseStr(){
                    return this.name.split('').reverse().join('')
                }
            },
            computed:{}
        })
    </script>

此時頁面上輸出的是：

當我們使用computed來反轉字符串的時候：

	<div id="app">
        <p>原本的字符串{{name}}</p>
        <p>函數調用反轉字符串{{reverseStr()}}</p>
        <p>通過計算屬性來反轉字符串{{reverse}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                name:"Zhang San"
            },
            methods:{
            //使用函數調用來反轉字符串
                reverseStr(){
                    return this.name.split('').reverse().join('')
                }
            },
            //使用計算屬性來反轉字符串
            computed:{
                //get方法
                reverse(){
                    return this.name.split('').reverse().join('')
                }
            }
        })
    </script>

頁面上顯示的是：

總結：我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴緩存，只有相關依賴發生改變時纔會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。computed 性能會更好，但是如果你不希望緩存，你可以使用 methods 屬性。