一、计算属性computed
当其依赖属性的值发生变化是,这个属性会重新计算自动更新,并通不更新到dom树中
作用:
- 减少模板中的计算逻辑
- 进行数据缓存
- 依赖固定的数据类型(响应式数据)
使用:
- 在computed属性对象中定义计算属性的方法
- 在页面中使用 {{方法名}} 来显示计算结果
- 通过getter/setter实现属性数据的显示和监视
计算属性的不足:
计算属性中如果执行了大量的耗时操作,会带来一些性能问题 导致大量不必要的运算。
二、侦听器watch
作用
- 比computed更加灵活,囊括所有computed的性能
- watch中可以执行任何逻辑比如 :函数节流、Ajax异步数据获取、甚至操作Dom
- 依赖固定的数据类型
使用
- 通过vm对象大大$watch()或watch配置来监视指定的属性
- 当属性变化时,回调函数自动调用,在函数内部进行计算
三、总结
- computed能做的 watch都可以做,反之则不行
- 能使用computed的地方,优先使用computed
- computed是计算一个新的属性,并将该属性挂载到vm上,而watch是监听已经存在且挂载到vm上的数据,所以用watch同样可以监听computed计算属性的变化(data,props同样适用)
- computed的本质是一个惰性求值的观察者,具有缓存性,当依赖变化后,第一次访问computed属性,才会计算新的值,而watch这是当数据发生变化变回调用执行函数
- computed多只用在一个值需要多个值计算得出的情况下,而watch适用于一个数据影响多个值的情况下。