Vue2学习笔记:vue计算属性

一、计算属性

什么时候会用到计算属性?

当绑定的数据逻辑较为复杂时!

例如:

传入的javascript表达式较为复杂

①基础例子

html
js
console

Vue 知道vm.reversedMessage依赖于vm.message,因此当vm.message发生改变时,依赖于vm.reversedMessage的绑定也会更新。

②计算缓存 vs Methods(计算属性是基于它的依赖缓存)

为什么会这样呢?因为computed下定义的方法有计算缓存,而methods下的方法没有。

我们为什么需要缓存?假设我们有一个重要的计算属性A,这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存,我们将不可避免的多次执行A的 getter !如果你不希望有缓存,请用 method 替代。

③计算属性 vs Watched Property(观察vue实例上的数据变动)

显然computed更佳

④计算setter

现在在运行vm.fullName = 'John Doe'时, setter 会被调用,vm.firstName和vm.lastName也会被对应更新。

二、观察Watchers(watch学到的不多,倒是发现一个有趣的api、限制操作频率的lodash以及axios)

在这个示例中,使用watch选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这是计算属性无法做到的。

学好Vue!

成为优秀的前端工程师!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容