在模板中写入过多的逻辑使模板过重且难以维护。因此有了计算属性(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. Mybatis全部标签

    一.定义SQL语句 (1)select 标签的使用 属性介绍: id :唯一的标识符. parameterType:传给此语句的参数的全路径名或别名 例:com.test.poso.User或user ...

  2. SQL函数学习(十六):STUFF()函数

    16.STUFF()函数 STUFF()函数用于删除指定长度的字符,并可以在制定的起点处插入另一组字符. 16.1 STUFF()函数语法 select stuff(列名,开始位置,长度,替代字符串) ...

  3. 【教训】 form表单提交时,action url中参数无效

    今天提交一个表单,内容参考如下: <form action="add.php?a=123&b=456">     <input type="hi ...

  4. Android应用内 代码截屏(获取View快照)和 禁止截屏

    1. 应用内的代码截屏(获取View的快照) Android的View类中提供了获取控件绘制缓存的方法,这种截屏的方式仅限于应用内自己的Activity界面,不需要任何权限,严格来说该方法不属于截屏, ...

  5. java基础之:java注解

    一:元注解 元注解的作用就是负责注解其他注解.Java5.0定义了4个标准的meta-annotation类型,它们被用来提供对其它 annotation类型作说明.Java5.0定义的元注解: 1. ...

  6. 电脑(台式机||笔记本)开机password忘记通用解决方法

    方法:直接制作一个老毛桃装机版u盘启动盘 网址:老毛桃官网 步骤:依照网址的解说,将制作好的U盘插入到电脑的usb插口.执行Windows 登入password破解菜单,搜索password所在的盘符 ...

  7. 一起來玩鳥 Starling Framework(9)Particle

    最後,來看看Starling裡一個很炫的功能:Particle.Particle屬於extension,所以要另外下載檔案:Starling-Extension-Particle-System.下載之 ...

  8. CentOS 7 yum安装失败问题

    在CentOS 7中,执行yum安装,一直报错,错误信息如下 其实在上述的错误信息中,上述中的repodata/repomd.xml文件据说是/mnt目录rpm包的目录,路径 在/mnt中因为没有/r ...

  9. [Functional Programming] Pull Many Random Numbers in a Single State ADT Transaction

    We have the ability to select a single random card from a pile of twelve cards, but we would like to ...

  10. 利用forever在Linux上实现Node.js项目自启动

    在一台计算机上手动跑Node项目简单,node xx.js就搞定了,想让Node项目后台执行,尽管不能直接用node命令搞定,可是在安装了forever这个包以后.还是非常轻松的.只是要是在远程ser ...