在模板中写入过多的逻辑使模板过重且难以维护。因此有了计算属性(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. 10.3(Java学习笔记)JDBC时间操作

    一.时间分类 数据库     java类 Date  ---- java.sql.Date   表示日期 yyyy-MM--dd (年月日) Time  ----java.sql.Time    表示 ...

  2. c pvr转存pvr.ccz格式 (转 http://www.cnblogs.com/howeho/p/3586379.html)

    pvr.ccz 是把pvr用zlib算法压缩后的图像格式,其优点是可以提升文件读取效率. 大多数情况下我们可以用一些工具来将pvr压缩到pvr.ccz ,下面提供一个c++方法来完成这个过程 int ...

  3. [Bug]转:使用jquery的 uploadify,在谷歌浏览器上总会崩溃的解决方法

    最近做的项目使用了jquery的uploadify,但是在谷歌浏览器测试总是会出现崩溃.如: 因为是java项目. 解决的办法是: 给引入的js加上一个参数,时间戳就可以,防止缓存,使每一次都请求.( ...

  4. mq使用经验

    1.Producer使用指南--发送消息注意事项 1.正常情况下一个业务系统尽可能用一个Topic,消息子类型用tags来标识,tags可以由业务系统自由设置.只有发送消息设置了tags,消费方在订阅 ...

  5. 重设Windows 7密码 z

    Restart the computer to boot using the CD. Once the GUI loads, press SHIFT+F10 to bring up the comma ...

  6. css活用,评分点击星星

    1.字符图集 2.css样式 .cleanfloat::after{display: block; clear: both; content:""; visibility: hid ...

  7. saltstack之salt event事件用法

    event是一个本地的ZeroMQ PUB Interface,event是一个开放的系统,用于发送信息通知salt或其他的操作系统.每个event都有一个标签.事件标签允许快速制定过滤事件.除了标签 ...

  8. OS中处理机调度模型和调度算法

    OS中处理机调度模型和调度算法 调度层次 1.1. 高级调度(长程调度,作业调度) 功能:依据某种算法.把在外存队列上处于后备队列的那些作业调入内存.以作业为操做对象. 作业:比程序更为广泛的概念,不 ...

  9. PHPer 应聘见闻

    关于我自己 我,很普通的一个开发,88年出生在皖南山区.从小学到高中毕业都没想过自己会从事软件开发,高考的误打误撞,被某普通二本院校收编.大学浑浑噩噩,对软件开发也没多大的兴趣,11年毕业后来杭,面试 ...

  10. lodash round

    _.round(number, [precision=0]) 根据 precision 四舍五入 number. _.round(4.006); // => 4 _.round(4.006, 2 ...