在模板中写入过多的逻辑使模板过重且难以维护。因此有了计算属性(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. Spring Boot中使用MyBatis注解配置详解

    传参方式 下面通过几种不同传参方式来实现前文中实现的插入操作. 使用@Param 在之前的整合示例中我们已经使用了这种最简单的传参方式,如下: @Insert("INSERT INTO US ...

  2. 计算最大公约数 Exercise05_14

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:计算最大公约数 * */ public class Exercise05_ ...

  3. 十. 图形界面(GUI)设计11.对话框

    对话框是为了人机对话过程提供交互模式的工具.应用程序通过对话框,或给用户提供信息,或从用户获得信息.对话框是一个临时窗口,可以在其中放置用于得到用户输入的控件.在Swing中,有两个对话框类,它们是J ...

  4. 13test02:阶乘

    //假设32位int型变量y是表示最大人数的x的阶乘,即y=x!,当x最大值取什么时,y取最大值 //,且乘法不溢出. #include<iostream> using namespace ...

  5. Java高级架构师(一)第30节:把应用部署到Linux服务器上

  6. opencv在vc2010 express下环境搭建方法笔记+空白通用工程(已编译测试通过)(提供下载)

    opencv在VC2010 express版本下的环境搭建可以参见下面的wiki,这里面讲的非常清楚. http://wiki.opencv.org.cn/index.php/VC_2010_Expr ...

  7. 使用Vue-cli创建project遇到的坑

    环境: win10 / node( v10.2.1) /npm( v5.6.0) 准备: 1.安装node:上node官网下载node版本进行安装 2.安装vue-cli:npm install -- ...

  8. vue生命周期钩子,一张图片

  9. [Python爬虫] 之二十二:Selenium +phantomjs 利用 pyquery抓取界面网站数据

    一.介绍 本例子用Selenium +phantomjs爬取界面(https://a.jiemian.com/index.php?m=search&a=index&type=news& ...

  10. 在hadoop作业中自定义分区和归约

    当遇到有特殊的业务需求时,需要对hadoop的作业进行分区处理 那么我们可以通过自定义的分区类来实现 还是通过单词计数的例子,JMapper和JReducer的代码不变,只是在JSubmit中改变了设 ...