Vue中关于watch、methods、computed的区别

Vue中关于watch、methods、computed的区别

1、监听属性watch：

watch是用来监听data或者computed里面的数据的，当数据发生改变时，watch就会自动触发，然后我们可以进行一些任务、逻辑。一开始不会执行。

// 如：
data () {
	return {
		show: false,
		obj: {name:'lzc',age:18}
	}
}
watch: {
	show: { // handler函数类似于是固定的搭配，不是随意写的
		handler (newValue , oldValue) { } , // 默认接收新值、旧值 两个参数
		immediate: true, // 要想其一开始就执行，添加这个
	} ,
	obj: { // 比如这里要监听obj对象下面的 name属性，下面要加 deep: true 才行
		handler (newValue , oldValue) { } ,
		deep: true, 
	} ,
	'obj.name': { // 可以直接这么写，注意这里要写成字符串格式
		handler (newValue , oldValue) { }
	} ,
	// 常规写法：
	'obj.name'(newValue , oldValue) { }
}

2、方法methods:

methods常用来存放一些事件处理函数。

3、计算属性computed:

computed计算属性一般是变化的、受其他属性影响的属性。一个组件里面的属性可以在data函数和computed计算属性里面定义，但在data里面定义过的属性，就不能再在computed里面写，因为这相当于重复定义了，会报错。

每个计算属性可以有get和set两个函数，get一定会有，set一般用于v-model双向数据绑定时会使用。computed在组件加载时就会执行一次，也即一开始就会执行一次。

//一般形式为：
computed: {
	'某属性': {
		get () {},
		set () {}
  	}
}
//当只有get函数时，可以简写为：（也即我们最常见的一种）
computed: {
	'某属性' () {}
}

什么时候选择watch？什么时候选择methods？什么时候选择computed？

1. 数据量较大，并且有异步操作我们就选择watch，一般的应用场景有：上拉加载、下拉刷新。
2. methods的使用：事件处理程序（用户交互）
3. computed的使用满足一下两个条件就可以：
   • 暴露一个类似于全局变量的数据
   • 可以进行逻辑的处理