vue 计算属性和方法

计算属性:

	(1)与函数的区别:多次访问依赖性不变的计算属性会立即返回之前的计算结果,而调用方法将总会再次执行函数。
		能监听对象内部属性的变化
	(2)计算属性中的方法不能作为事件的回调函数
	(3)scripts内都是通过this.属性名调用data中的内容,而template中直接属性名调用
	
	(4)计算属性可配合指令直接使用,如计算属性返回一个数组, v-for='(item,index) in 计算属性名'	

	使用:

	1、与data同级
		computed:{
			xx(){
				...
			},
			xx:(vm)=>{	当使用箭头函数,this不会指向这个组件的实例,通过第一个参数来使用组件实例
				vm.data
			},
			计算属性还可以设置get和set方法,在进行调用或赋值时,自动调用set和get方法
			xx:{
					get:function(){return xx},
					set:function(value){xx=value}
			}
		}
	2、调用计算属性
		在template中
		{{函数名}}

methods方法:
	(1)与data同级的methods中声明
		methods:{
			es6语法或键值对函数
		}
	(2)调用方法
		在template中
		{{函数名()}}

代码示例：

<template lang='html'>
	<div>
		{{getMsg}}
		{{getMsg2()}}
	</div>

</template>

<script>
export default{
	name:'vuedemo',
	data()
	{
		return{
			msg:'hello world'
		}
	},
	//计算属性
	computed:{
	//如果数据未被改变,则只会一次
		getMsg()
		{
			return this.msg.split('').reverse().join('');
		}
	},
	//方法
	methods:{
		getMsg2()
		{
			return this.msg.split('').reverse().join('-');
		}
	}
	
}
</script>

<style lang='css'>
</style>