Vue computed和watch，methods

computed和watch，methods

https://segmentfault.com/a/1190000012948175
https://www.cnblogs.com/fengxiongZz/p/8074731.html
https://blog.csdn.net/lhban108/article/details/82465547

watch、computed和methods之间的对比

1. computed(多个值变化，影响到一个结果) 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。他是函数主要当作属性来使用，逻辑简单。
2. methods方法表示一个具体的操作，主要书写业务逻辑；
3. watch(一个值变化，影响到多个结果改变)一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化（watch监控路由对象‘$route’），从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

计算属性 computed (多个值变化，影响到一个结果) 原来没有属性（结果），创建可计算属性（get/set,一个默认get体）
在实际的应用中，我们会有一些原始数据，同时在应用中又会有一些数据是根据某些原始数据派生出来的，针对这样的一种情况，vue 定义了一个专门用来处理这种派生数据的选项：computed

       				computed:{//前面的数值变化影响到结果---》get
				'fullname':function(){
					return this.firstname+this.lastname;
			}

				fullname(){
					return this.firstname+this.lastname;
				}
			}
       

       fullname:{ //双向数值修改(前面变化影响到后面，后面变化影响到前面)  get+set
					get:function(){
						return this.firstname+"-"+this.lastname;
					},
					set:function(newval){
						//console.log(newval);
						var arr=newval.split('-');
						//console.log(arr);
						this.firstname=arr[0];
						this.lastname=arr[1];
					}
				}

• 计算属性类似 getter 和 setter ，当访问某个计算属性的时候，就会调用 computed 中同名的函数，函数的返回值将作为该计算属性的值
• 计算属性的值依赖计算函数中依赖的其它响应式数据
• 计算属性的值可以缓存，如果依赖的其它响应式数据没有发生变化，但多次访问该计算属性，得到结果是最近一次变化产生的值（相对于调用方法得到结果在某些时候性能要好一些）

侦听属性 watch（变化的值） (一个值变化，影响到多个结果改变) 检测以有属性

有的时候，我们需要的派生数据是通过异步的方式处理的，这个时候，计算属性就不太好用了（不能处理异步）。我们可以使用另外一个选项：watch

		computed是属性调用，而methods是函数调用
		computed带有缓存功能，而methods不是
		computed可以监控对象，而methods不是
		
		watch可以监控对象，而methods不是
		vm.$watch( expOrFn, callback, [options] )

		var unwatch = vm.$watch('a', cb)
		// 之后取消观察
		unwatch()

		vm.$watch('someObject', callback, {
		  deep: true//深度监听，但是结果一样
		})
		
		vm.$watch('a', callback, {
		  immediate: true // true: 初始化时就会先执行一遍该监听对应的操作
		})

        Watch:{
        'obj':{
					handler(newval){
						console.log(newval);
					},
					deep:true,
					immediate: true
				}
 }
		 立即以 `a` 的当前值触发回调
		 初始化之前，先监听一下操作，以原始的值回调
		
		watch和computed均可以监控程序员想要监控的对象，
		当这些对象发生改变之后，可以触发回调函数做一些逻辑处理
		
		watch监控自身属性变化(重新编译，性能差)   vm.$watch()
		watch监控路由对象(一个值变化，影响到多个结果改变)
		数据变化时来执行异步操作，这时watch是非常有用的。
		
		计算属性computed的特点(多个值变化，影响到一个结果)
		计算属性会依赖于他使用的data中的属性，
		只要是依赖的属性值有改变，
		则自动重新调用一下计算属性；
		如果他所依赖的这些属性值没有发生改变，
		那么计算属性的值是从缓存中来的，
		而不是重新编译，那么性能要高一些，
		所以vue中尽可能使用computed替代watch。

	<div id="app">
			姓：<input type="text" v-model="firstname"/>
			名：<input type="text" v-model="lastname"/>
			
			总称：{{fullname}}
			
			<input type="text" v-model="obj.a"/>
		</div>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					firstname:"li",
					lastname:"bao",
					fullname:"li bao",
					obj:{a:"1111"}
				},
				watch:{
//                  obj(){//无法监测到里面数值的变化
//                  	console.log(this.obj.a);
//                  },
//                  'obj':{
//                  	handler(oldVal,newVal){
//                  		console.log(oldVal,newVal);//结果一样，都是新值
//						},
//						immediate: true,//初始化时就会先执行一遍该监听对应的操作
//						deep:true//console.log打印的结果,
//						//发现oldVal和newVal值是一样的,
//						//所以深度监听虽然可以监听到对象的变化,
//						//但是无法监听到具体对象里面那个属性的变化
//                  },
                    "obj.a":{
                    	handler(oldVal,newVal){
                    		console.log(oldVal,newVal);//结果会不一样
						},
						immediate: true
                    },
                    firstname(){//普通的就可以用这种方式检测,无法添加检测属性
                    	console.log(this.firstname);
                    }
				}
			})
			
			</script>

vm.$watch("obj.a",function(oldVal,newVal){
				console.log(oldVal,newVal);
			})

多层监听

对于多层数据的监听，可以使用字符串+点语法

watch: {
  'a.b.c': function() {
    //...
  }
}

深度监听

默认情况下，watch 只对当前指定的值进行一层监听，如果需要对对象进行深度监听

watch: {
  a: {
    handler() {
      console.log('a deep');
    },
    deep: true
  }
}