vue-learning：20 - js - 区别：filters / data / computed / watch / methods

Posted 2021-12-01 webxu20180730

区别：filters / data / computed / watch / methods

在配置对象options中，filters/data/computed/watch/methods的每一项都有适合的场景，并且通常在项目中都是混合使用。

data对象适合纯粹的数据。如果想要某个数据在某个地方应用后需要视图改变的话，那就好放在data对象中，如果需要响应逻辑运算后的结果那最好使用计算属性。如果需要外部参数参与逻辑运算的话那就使用方法。

filter是纯函数，适合模板或v-bind值的格式化，比计算属性高效，可以替代部分计算属性的功能。
watch适合监听异步事件，执行异步回调。

选项	可读	可写	有默认参数	可以传入参数（非默认）	进行逻辑运算	有缓存
data	是	是	无	否	可以接受简单表达式	无
computed	是get	是set	set(newVal)	否	是	是
watch	是	否	（newVal, oldVal)	否	是	无
methods	是	否	事件处理对象event	是	是	无
filtes	是	否	val	是（作为第二个参数开始）	是	无