Vue成神之路（二）：Vue中watch，computed，methods的使用和区别

一：watch的使用方式（监听器）

1、watch 函数是不需要调用的。
2、重点在于监控，监控数据发生变化的时候，执行回调函数操作。
3、当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch
4、函数名就是你要监听的数据名字

a：第一种方式
缺点：值第一次绑定的时候 不会执行监听函数，只有当值改变的时候才会执行。
优点：代码编写简单，直观理解

1. data(){
2. 	return{
3. 		userName:"",
4. 	}
5. },
6. watch:{
		userName(newValue,oldValue){
			//do my work
		},
	}

b：第二种方式
优点：第一次值发生变化就可以监听到，在父组件向子组件传递参数的可以使用到
缺点：可能造成某些代码的重复执行

7. data(){
8. 	return{
9. 		userName:"",
10. 	}
11. },
12. watch:{
		userName:{
			handle(newValue,oldValue){
			//do my work
			},
			immediate:true,
		}
	}

c：第三种方式
优点：监听对象任意一个属性变化或者只监听某一个属性变化
缺点：对象任意属性值变化都会执行监听函数
注意：数组是不用深度监听的，wathc中尽量不使用this对象

13. data(){
14. 	return{
15. 		user:{
16.				age:"",
17.				name:"",
18.				sex:true,
19.			 },
20. 	}
21. },
22. watch:{
		user:{//监听对象任意属性
			handle(newValue,oldValue){
			//do my work
			},
			immediate:true,
			deep:true,
		},
		'user.age':{//监听对象某一属性
			handle(newValue,oldValue){
			//do my work
			},
			immediate:true,
			deep:true,
		}
	}

二：computed的使用方式（计算属性）

computed属性从根本上来说，还是一种属性，它会依赖原属性的变化来改变自生属性值
1、监控自己定义的变量，不用再data里面声明，函数名就是变量名
2、适合多个变量或对象进行处理后返回一个值(结果)。若这多个变量发生只要有一个发生变化，结果都会变化。
3、计算的结果具有缓存,依赖响应式属性变化，响应式属性没有变化，直接从缓存中读取结果。
4、在内部函数调用的时候不用加()。
5、必须用return返回
6、不要在computed 中对data中的数据进行赋值操作，这会形成一个死循环

computed: {
	    userInfo () {
	        return { ...this.user }
	    }
  },

三：methods方法（函数集合）

1.项目里面方法函数全部都可以定义在方法集合里面，调用一次就执行一次
2.不会有缓存