vue基础-定义数据和方法与computed属性

一、vue中定义数据是在：data

1.1 定义响应数据

data(){
	return {
		这里定义的数据是 响应数据
	}
}

1.2 定义静态数据

data(){
	this.属性名 = 值;
	return{
		
	}
}

二、 vue中定义方法是在：methods

*** methods 中的方法，调用几次就是执行几次！！！！

三、computed :计算属性

*** 对数据进行二次计算（二次计算其实也可以写在template模板中，但不建议把大量的逻辑写在template模板中，这样会让项目代码很难维护）

3.1 第一种写法

<template>
	<div>
		<h1>{{changeMsg}}</h1>//个数据
	</div>
</template>

export default {
	data(){
		return {
			msg:'这是一个数据'
		}
	}，
	computed:{
		changeMsg(){
			return this.msg.slice(-3);
		}
	}
}

3.2第二种写法

<template>
	<div>
		<h1>{{changeMsg}}</h1>//个数据
		<button @click='btn'></button>
	</div>
</template>

export default {
	data(){
		return {
			msg:'这是一个数据'
		}
	}，
	computed:{
		changeMsg:{
			get(){
				return this.msg..slice(-3);
			},
			set(val){
				this.msg = val
			}
		}
	},
	methods:{
		btn(){
			this.this.changeMsg = '2222';
		}
	}
}

****** methods 和 computed 的区别

	逻辑多次调用： computed 是有缓存的，methods 没有缓存