计算属性(computed)
作用:
- 减少模板中的计算逻辑
- 进行数据缓存
- 依赖固定的数据类型(响应式数据)
使用:
- 在computed属性对象中定义计算属性的方法
- 在页面中使用{ {方法名}}来显示计算的结果
- 通过getter/setter实现对属性数据的显示和监视
侦听器(wathc)
作用:
- 比computed更加灵活
- watch中可以执行任何逻辑,比如:函数节流、Ajax异步数据获取、甚至操作DOM
- 依赖固定的数据类型(响应式数据)
使用:
- 通过vm对象的$watch()或者watch配置来监视指定的属性
- 当属性变化时,回调函数自动调用,在函数内部进行计算
总结
- computed能做的,watch都能做,反之则不行(computed可以实现双向数据绑定,watch不可以)
- 能用computed的地方,尽可能使用computed
- computed是计算一个新的属性,并将改属性挂载到vm(Vue实例)上,而watch是监听已经存在且以挂载到vm上的数据,所以用watch同样可以监听computed计算属性的变化(其他还有data,props)
- computed本质是一个惰性求值观察者,具有缓存性,只有当依赖变化后&#x