在模板中写入过多的逻辑使模板过重且难以维护。因此有了计算属性(computed)的产生。

  你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据。所以当data中的数据发生变化时。所有依赖计算属性中的函数也会更新。而且最妙的是,我们已经以声明的方式创建了这种依赖关系:计算属性的getter是没有副作用的,这使得它易于推理和测试。

1,计算属性与methods

  我们将同一函数定义为method,而不是一个计算属性,得到的结果都是一样的。然而两者的不同:计算属性是基于他们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message还没发生改变,多次访问reversemessage,计算属性会立即返回之前的计算结果,而不必再次执行函数。而对于method,只要发生渲染,method就会执行该函数。

为什么要缓存?

  假设我们有一个性能开销比较大的计算属性A,它需要遍历一个极大的数组做大量的的计算。 然后我们可能有其他的计算属性依赖于A,如果没有缓存,我们将不可避免的多次执行A的getter。如果不希望有缓存,就用method代替。

2.computed属性与watched属性

  vue提供了一种更通用的方式来观察和响应vue事例上的数据变动:wathch属性。当你有一些数据需要随着其他数据变动而变动时,你很容易滥用watch。通常更好的想法是使用computed而不是命令式watch的回调。

3.计算setter.  

  计算属性默认只有getter,不过在需要的时候也可以提供一个setter.

4.观察watchers

  虽然计算属性在大多数情况下更合适。但有时也需要一个自定义的watcher。这就是为什么vue通过watch选项提供一个更通用的方法,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。

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

vue的计算属性的更多相关文章

  1. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  2. Vue.js 计算属性是什么

    Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

  3. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

  4. 一起学Vue之计算属性和侦听器

    概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...

  5. vue中计算属性的get与set方法

    计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...

  6. Vue.js 计算属性

    Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...

  7. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  8. Vue之计算属性

    上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...

  9. Vue.js 计算属性的秘密

    计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...

随机推荐

  1. Solr6 +mmseg4j+IK-Analyzer + SQLserver +DIH 完全配置

    如今做任何一个系统都有搜索,而搜索界有著名的三剑客: solr/elasticsearch/sphinx solr/elasticsearch 为同一类的,都是基于lucene开发的产品,本人也早在几 ...

  2. win10下安装mysql5.6 zip形式步骤

    1. 解压之后可以将该文件夹改名,放到合适的位置,个人建议把文件夹改名为MySQL Server 5.6,放到C:\Program Files\MySQL路径中. 2. 添加环境变量.path中添加C ...

  3. [SpringMVC+redis]自定义aop注解实现控制器访问次数限制

    原文:http://www.cnblogs.com/xiaoyangjia/p/3762150.html?utm_source=tuicool 我们需要根据IP去限制用户单位时间的访问次数,防止刷手机 ...

  4. 【sql】关联查询+表自关联查询

    表: 经销商 dealer   字段 uid  parent_uid  name 联系人 contact  字段 uid  dealer_id  contact_main 需求: 想要查询到经销商的信 ...

  5. WebServic dynamic url

    How to make your Web Reference proxy URL dynamic 开发环境和部署环境,Webservice 的URL不同 需将url 配置到 web.config文件中 ...

  6. WebLogic Server 多租户资源迁移

    重新建立一个动态集群,并启动,注意监听地址不能和其他集群重合 选择相应的资源组进行迁移, 迁移后,访问新的地址成功. 通过OTD负载均衡器访问原有的地址成功. 直接访问原来后台地址失败,表示资源确实已 ...

  7. PostgreSQL配置文件--资源使用(除WAL外)

    2 资源使用(除WAL外) RESOURCE USAGE (except for WAL) 2.1 内存 Memory 2.1.1 shared_buffers 数字型 默认: shared_buff ...

  8. Thunderbird使用发邮件模板

    Thunderbird的强大之处是可以使用多种第三方插件,其中有个插件SmartTemplate4,是用来设置Thunderbird发件模板的. 然后,模板设置内容如下: <p>:< ...

  9. fedora25安装和docker-ce_清华源

    docker-ce_清华源 https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/fedora/ fedora25 docker-ce版本: htt ...

  10. 写一个函数判断字符串中"{"与"}","["与"]","("与")"匹配,"{"必须在"}"前面,"["必须在"]"前面,"("必须在")"前面,可以嵌套

    boolean matchBracket( String str ) { Stack stack = new Stack(); try { for ( int i = 0; i < str.le ...