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 属性。