watch 监听功能 computed 计算属性

watch 

watch是vue内部提供的一个用于侦听功能的更通用的方法，其用来响应数据的变化，通过特定的

数据变化驱动一些操作。
vue官方文档解释当需要在数据变化时执行异步或开销较大的操作时，推荐使用该方法。

<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			variable:null,
		},
		watch:{
			// 此处监听variable变量，当期有变化时执行
			variable(item1,item2){
				// item1为新值，item2为旧值
			}
		}
	}
</script>

deep深度监听

侦听普通变量的变化是使用以上方法，当侦听的某个变量值是对象时则不起作用，这时需要使用deep深度监听。

<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			obj:{
				a:''
			},
		},
		watch:{
			// 此处监听obj属性a值变量
			'obj.a'(item1,item2){
				// item1为新值，item2为旧值
			},
			deep:true
		}
	}
</script>

什么是watch?

​        watc是用来响应data中的数据的变化，一般用于异步或者开销较大的操作

​        \- 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听

 

  obj:{

         handler(newval){

                console.log(newval);

          },

      deep:true, // 深度监听，可以监听对象的属性的变化

     immediate: true  // 监听初始的值

        },

computed 计算属性

     1.computed 阐述

1. 监听值未在data中定义，以return返回值形式；
2. 计算属性变量在computed中定义，属性监听在data中定义。
3. 计算属性默认只有get来读取，手动修改计算属性时，会触发手写的set函数。
4. 计算属性的值会被缓存，只有实例中相关依赖值改变时，才重新计算，性能好但不适合做异步请求。
5. 计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。

什么是计算属性？

​        算属性是基于它们的响应式【依赖进行缓存】的

​        意思就是 (计算属性依赖的值发生变化时，会重新计算，如果依赖的值不发生变化，计算属性会使用之前缓存的值)

​        - computed 使用场景多用于

​        对多个变量或者对象进行处理后返回一个结果值，也就是多个变量中的某一个值发生了变化，则我们监控的这个值也就会发生变化