7.Vue的计算属性
1.什么是计算属性
computed：计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存！
2.编写程序
注意：methods 和 computed 里的东西不能重名
说明：
- methods：定义方法，调用方法使用 currentTime1()，需要带括号
- computed：定义计算属性，调用属性使用 currentTime2，不需要带括号；this.message 是为了能够让 currentTime2 观察到数据变化而变化
- 如何在方法中的值发生了变化，则缓存就会刷新！可以在控制台使用 vm.message="计算属性",改变下数据的值，再次测试观察效果！
结论：
- 调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="vue">
<!--注意，一个是方法，一个是属性-->
<p>调用当前时间的方法：{{currentTime1()}}</p>
<p>当前时间的计算属性：{{currentTime2}}</p>
</div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
message: 'Hello Vue'
},
methods: {
currentTime1: function () {
return Date.now();
}
},
computed: {
//currentTime2 ，这是一个属性！不是方法
currentTime2: function () {
this.message;
return Date.now();
}
}
});
</script>
</body>
</html>
可以看出：
- methods中的方法没有放入缓存中，调用一直改变
- computed中的方法放入缓存中，调用不变。如果修改其中内容，则缓存中的内容改变。
7.Vue的计算属性的更多相关文章
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- vue的计算属性
在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- vue中计算属性的get与set方法
计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...
- Vue.js 计算属性
Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- Vue之计算属性
上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...
- Vue.js 计算属性的秘密
计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...
随机推荐
- 阿里开源 KT Connnect，轻量级云原生测试环境治理平台来啦！
作者| 阿里云技术专家 郑云龙(砧木) 目前越来越多的开发者开始采纳 Kubernetes 管理基础设施环境,并通过 Kubernetes 完成日常的开发,测试以及生产发布活动,为了能够有效的帮助开发 ...
- GAN简介
GAN Generative Adversarial Networks 生成对抗网络.学习真实世界的真实数据的分布,用于创造以假乱真的数据.比如前段时间很火的应用deep fake.deep nude ...
- C# 重载 overload,重写override覆盖
重载overload 派生类和基类的方法同名,其中访问修饰符(public,private,protected,internal,protected internal),返回类型,参数类型,个数,顺序 ...
- TCP SYN flood洪水攻击原理和防御破解
简介 TCP协议要经过三次握手才能建立连接: 于是出现了对于握手过程进行的攻击.攻击者发送大量的SYN包,服务器回应(SYN+ACK)包,但是攻击者不回应ACK包,这样的话,服务器不知道(SYN+AC ...
- Python-函数参数类型及排序问题
Python中函数的参数问题有点复杂,主要是因为参数类型问题导致的情况比较多,下面来分析一下. 参数类型:缺省参数,关键字参数,不定长位置参数,不定长关键字参数. 其实总共可以分为 位置参数和关 ...
- React的jsx语法，详细介绍和使用方法！
jsx语法 一种混合使用html及javascript语法的代码 在js中 遇到<xx>即开始html语法 遇到</xx>则结束html语法 恢复成js语法 例如: let D ...
- curl sftp libcurl 功能使用
#include <curl/curl.h> #undef DISABLE_SSH_AGENT struct FtpFile { const char *filename; FILE *s ...
- SimpleTagSupport 获取request、session
开发jsp系统时,我们经常会用到tag来写java的逻辑代码,一般会继承两个类,一个是SimpleTagSupport,另一个是TagSupport,由于TagSupport书写配置比较复杂(我个人才 ...
- 多线程学习笔记(三) BackgroundWorker 暂停/继续
BackgroundWorker bw; private ManualResetEvent manualReset = new ManualResetEvent(true); private void ...
- windows elasticsearch搭集群启动失败failed to send join request to master....
创建几份elasticsearch副本,修改各自config\elasticsearch.yml配置文件: 第一份: #允许elasticsearch跨域访问,使用elasticsearch-head ...