2020/09/22 vue学习笔记——计算属性与方法

计算属性与方法

计算属性通过computed来调用getter与setter函数来实现效果，其实也可以通过在表达式中调用方法来达到计算属性实现的效果：

<div id="app">
    {{ReverseMsg}}
	{{ReverseMsg}}
	{{ReverseMsg}}
	</br>
	{{ReverseMsg1()}}
	{{ReverseMsg1()}}
	{{ReverseMsg1()}}
</div>

var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello'
        },
        computed:{
        //计算属性
            ReverseMsg:{
                get:function(){//getter函数
                    return this.msg.split('').reverse().join('');
                },
                set:function(newValue){//setter 函数
                   this.msg=newValue.split('').reverse().join('');
                }
            }
           
        },
		methods:{
		//方法
		    ReverseMsg1:function(){
		          return this.msg.split('').reverse().join('');
		    }
		}
    });

执行结果：

从效果来看二者似乎并无区别，不同的是计算属性是基于它们的响应式依赖进行缓存的，就是说计算属性所计算出的值是根据this.msg所得出，并缓存下来。只要this.msg的值不发生改变，则所计算出的值会一直缓存。不同于方法所计算出来的值，方法所得出的值不会进行缓存，若要二次调用，必须要进行二次计算，这从效率上来说大打折扣。