filter、computed、watch区别及用法解析

watch与computed、filter：

watch: 监控已有属性，一旦属性发生了改变就去自动调用对应的方法
computed: 监控已有的属性,一旦属性的依赖发生了改变，就去自动调用对应的方法
filter: js中为我们提供的一个方法，用来帮助我们对数据进行筛选

1. 计算属性 computed

computed比较适合对多个变量或者对象进行处理后返回一个结果值，当多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，计算属性是基于它们的响应式依赖进行缓存的

//计算属性中的属性不需要在data中定义，而且必须有return
data(){
	return{
    	firstname:"张",
        lastname:"三"
    }
}
computehd(){
	fullname(){
    	return this.firstname+this.lastname
    }
}
/*计算属性具有缓存，计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。
只要计算属性的依赖没有改变，那么调用它就会直接返回之前的缓存。 同时computed对于其中变量的依赖时多个
的时候，只要其中一个发生了变化都会触发这个函数*/

//应用场景：当一个变量的值受多个变量的值影响

侦听器 Watch

监测Vue实例上的数据变动需要是data 中已经存在的数据，此外，区别于computed的是watch能够异步操作，

//监听器watch中的值需要在data中定义，且函数有参数，newval和oldval
data: {
  firstName: '张',
  lastName: '三',
  fullName: '张三r'
},
watch: {
  firstName: function (oval，nval) {
    this.fullName = nval + ' ' + this.lastName
  },
  lastName: function (oval，nval) {
    this.fullName = this.firstName + ' ' + nval
  },
  immediate: true,// 代表在wacth里声明了firstName之后立即先去执行其函数方法
  deep: true //深度监听
}
//watch的依赖是单个的，它每次只可以对一个变量进行监控，并且区别于computed属性，监听器watch可以是异步的而computed则不行

//应用场景：当一个变量的值影响着多个变量的值

过滤器 filter

//过滤器分为全局过滤和局部过滤，当命名冲突时以局部过滤器权重高
//插值中
{{msg|filterMsg}}
//bind中
<div v-bind:"id|filterId"></div>
//运用场景：
//一般来说我们用过滤器来格式化一些数据或者渲染的文本对于格式展现的要求

全局过滤器：
Vue.filter('过滤器名',function(value){
	//do some
})

局部：
filters:{
	过滤器名称:function(value){
		//do some
	}
}

/*注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器,过滤器可以串联，执行顺序为从左到右，
并且因为过滤器是 JavaScript函数，因此可以接收参数*/

小结：

1. watch监控现有的属性,computed通过现有的属性计算出一个新的属性
2. watch不会缓存数据，每次打开页面都会重新加载一次，computed如果之前进行过计算他会将计算的结果缓存，如果再次请求会从缓存中得到数据

filter 与 computed 的区别：

1. 触发时机不同：computed依赖 Vue
   的数据更新通知机制，在属性所依赖的其他数据项发生变化时才会重新触发计算。优点是计算频率相对较低；缺点是依赖于组件，难以抽取成独立逻辑，也就是复用性低。filter
   则是显式调用时触发，一般应用在模板渲染上。优点是容易在组件外抽象；缺点是每次模板渲染时都需要重新执行计算。
2. 应用范围不同：computed 很广泛，可以应用在其他computed、methods、生命周期函数、模板；filter
   一般只应用于模板渲染上，如果要在其他位置复用，需要使用 this._f 函数
3. 定义方式的区别：computed 属性只能在组件内部或通过mixins对象定义；而 filter 有两种定义方式，一是在组件内部通过filters 属性定义（局部）；一是在组件外部通过 Vue.filter 函数定义（全局）

filter 无法缓存，调用频率高，因此特别适用于格式化输出场景，比如日期格式化。filter 具有组合调用能力，因此可以在项目架构层面定义一堆基础的、简单的filter，按需在组件内组合适用。computed 属性具有缓存能力，在组件内普适性更强，因此适用于复杂的数据转换、统计等场景。