Vue的watch, computedValue, methods, expression

overview

在Vue中,这三个API能实现同样的效果,但是作用又略有不同,例如我们现在有一个反转输入的input内容的需求,我们看看三个API分别如何实现


image.png

expression

首先是expression,最简单方式,但是缺点比较明显,第一,不是声明式,而且不直观,第二,如果多个地方使用,就要写多次,非常冗余


image.png

methods

然后是methods,其实就是方法调用,缺点主要是同样的计算过程要调用多次,比较冗余


image.png

computedValue

使用computedValue的好处就是可以缓存计算过的value,这样如果需要多次调用,就不需要多次计算,在计算量比较大的应用场景里能提高效率,节约计算资源


image.png

watch

watch的根本目的是在于观测一个value的变化,所以如果需要计算的值需要依赖多个value,那么就需要观测多个value,而且,如果要在templete中显示的话,就需要在data中用另外一个value来保存改变后的值


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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,390评论 19 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,930评论 18 399
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,460评论 0 29
  • //Clojure入门教程: Clojure – Functional Programming for the J...
    葡萄喃喃呓语阅读 9,204评论 0 7
  • 几天前因为班里的同学看了我写的《良师益友》后,在同学群里的东阳同学问我:既然陈医生看透了太多的生与死,那他有没有跟...
    惠芝阅读 2,900评论 2 4