1.什么是计算属性

　　computed：计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存！

2.编写程序

　　注意：methods 和 computed 里的东西不能重名

说明：

  • methods：定义方法，调用方法使用 currentTime1()，需要带括号
  • computed：定义计算属性，调用属性使用 currentTime2，不需要带括号；this.message 是为了能够让 currentTime2 观察到数据变化而变化
  • 如何在方法中的值发生了变化，则缓存就会刷新！可以在控制台使用 vm.message="计算属性",改变下数据的值，再次测试观察效果！

结论：

  • 调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.  
  9.  <div id="vue">
  10.      <!--注意，一个是方法，一个是属性-->
  11.      <p>调用当前时间的方法：{{currentTime1()}}</p>
  12.      <p>当前时间的计算属性：{{currentTime2}}</p>
  13.  </div>
  14.  
  15.  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  16.  <script type="text/javascript">
  17.      var vm = new Vue({
  18.          el: '#vue',
  19.          data: {
  20.              message: 'Hello Vue'
  21.          },
  22.          methods: {
  23.              currentTime1: function () {
  24.                  return Date.now();
  25.              }
  26.          },
  27.          computed: {
  28.              //currentTime2 ，这是一个属性！不是方法
  29.              currentTime2: function () {
  30.                  this.message;
  31.                  return Date.now();
  32.              }
  33.          }
  34.      });
  35.  </script>
  36.  </body>
  37.  </html>

可以看出：

  • methods中的方法没有放入缓存中，调用一直改变
  • computed中的方法放入缓存中，调用不变。如果修改其中内容，则缓存中的内容改变。

7.Vue的计算属性的更多相关文章

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

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

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

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

  3. vue的计算属性

    在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...

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

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

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

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

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

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

  7. Vue.js 计算属性

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

  8. 浅谈Vue中计算属性（computed）和方法（methods）的差别

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

  9. Vue之计算属性

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

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

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

随机推荐

  1. 插头Dp总结

    T1 HDU1693:Eat the Trees 题目大意:给出n*m的方格,有些格子不能铺线,其它格子必须铺,可以形成多个闭合回路.问有多少种铺法? 插头Dp板子题,题目要求可以是多个回路, 只需要 ...

  2. 洛谷 P2656 （缩点 + DAG图上DP）

    ### 洛谷 P2656 题目链接 ### 题目大意: 小胖和ZYR要去ESQMS森林采蘑菇. ESQMS森林间有N个小树丛,M条小径,每条小径都是单向的,连接两个小树丛,上面都有一定数量的蘑菇.小胖 ...

  3. [ThinkPHP]报错:Fatal error: Namespace declaration statement has to be the very first statement or after any declare call in the script in E:\wamp\www\jdlh\application\index\controller\Index.php on line

    错误提示说命名空间声明语句必须是第一句,可我看就是第一句没毛病呀,这是为啥呢,后面发现<?php 前面有个空格,删掉就正常了 去掉空格之后页面能正常显示

  4. 【洛谷5438】【XR-2】记忆（数论）

    [洛谷5438][XR-2]记忆(数论) 题面 洛谷 题解 很好的一道题目. 我们首先把所有数的每个质因子的出现次数模二,也就是把最大的完全平方因子给除掉.然后剩下部分一样的就可以产生\(1\)的贡献 ...

  5. Spring-AOP源码分析随手记(一)

    1.@EnableAspectJAutoProxy(proxyTargetClass = true) 就是弄了个"org.springframework.aop.config.interna ...

  6. UWP使用TreeView

    这个帖子本来是不想写的,但是感觉网上类似的也没有,对于小白可能有点用,于是想着还是写一下吧. 写之前想说下,UWP其实并没有死掉,对于win10来说,以后的新设备肯定是支持UWP的,而且微软一直在完善 ...

  7. 部署Azure环境Web应用程序不能直接访问JSON文件解决方案

    问题: 部署在Azure环境Web应用程序的JSON文件,直接通过浏览器或Web应用访问出现 404 的错误信息. 以下通过Firfox浏览器直接访问JSON文件返回的提示错误信息: “HTML 文档 ...

  8. WinForms中动态给treeView的节点添加ContextMenuStrip,并绑定Click事件

    生成ContextMenuStrip var docMenu = new ContextMenuStrip(); ToolStripMenuItem deleteMenuItem = new Tool ...

  9. 关于@HtmlHelper帮助器参数

    @Html.ActionLink("首页", "Index", "Index", new{},new { @class = "na ...

  10. c# 模拟表单提交，post form 上传文件、数据内容

    转自:https://www.cnblogs.com/DoNetCShap/p/10696277.html 表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipar ...