vue-learning：20 - js - 区别：filters / data / computed / watch / methods
Posted webxu20180730
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-learning：20 - js - 区别：filters / data / computed / watch / methods相关的知识，希望对你有一定的参考价值。
区别：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 | 是（作为第二个参数开始） | 是 | 无 |
以上是关于vue-learning：20 - js - 区别：filters / data / computed / watch / methods的主要内容，如果未能解决你的问题，请参考以下文章
vue-learning：16 - js - computed
vue-learning：23 - js - leftcycle hooks