Vue 计算属性与方法
computed
基本使用
如果数据需要有复杂的计算，则可以在Vue实例中定义计算属性，再交由mustache进行渲染。
- computed内部其实是通过getttr实现的，所以不用加括号即可完成其下方法的调用
- computed对象内部的方法如果想调用同一Vue实例下的方法或者属性，可使用this进行调用，Vue内部会通过代理器进行查找
如下所示，我们需要计算书籍的总价格：
<div id="app">
书籍的总价格是:{{totalPrice}}
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
books: {
"Vue实战": 128,
"JavaScrip入门": 99,
"HTML5初识": 87,
"CSS3": 68,
}
},
computed: {
totalPrice() {
return Object.values(this.books).reduce((pre, cur) => {
return pre + cur;
}, 0)
}
}
})
</script>
计算特性
如果修改了数据源，那么计算属性会重新进行计算，如下所示，书籍总价本来为382，当我们修改其中任意一本书的价格后，书籍总价格也将发生改变：
methods
基本使用
methods中定义的方法通常都是搭配事件监听做回调的，虽然我们也可以让它计算书籍的总价格，但这并不是一个明智的选择：
- methods下所定义的方法必须加括号才能完成调用
- methods对象内部的方法如果想调用同一Vue实例下的方法或者属性，可使用this进行调用，Vue内部会通过代理器进行查找
如下实例，用methods也可以完成书籍总价格的计算，同时它也用于computed的计算特性：
<body>
<div id="app">
书籍的总价格是:{{totalPrice()}}
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
books: {
"Vue实战": 128,
"JavaScrip入门": 99,
"HTML5初识": 87,
"CSS3": 68,
}
},
computed: {
},
methods:{
totalPrice() {
return Object.values(this.books).reduce((pre, cur) => {
return pre + cur;
}, 0)
}
}
})
</script>
</body>
差异区别
缓存特性
computed具有缓存特性，即多次调用只会调用一次，只有当数据源发生改变时才会自行调用一次。
而methods没有缓存特性，调用几次就执行几次，并且当数据源发生改变时也会自动调用之前的次数。
<body>
<div id="app">
{{computedAdd}}
{{computedAdd}}
{{computedAdd}}
<hr>
{{methodsAdd()}}
{{methodsAdd()}}
{{methodsAdd()}}
<button type="button">查看各执行几次</button>
</div>
<script src="./vue.js"></script>
<script>
let computedCount = 0;
let methodsCount = 0;
const app = new Vue({
el: "#app",
data: {
num1: 100,
num2: 200,
},
computed: {
computedAdd() {
computedCount++;
return this.num1 + this.num2;
}
},
methods: {
methodsAdd() {
methodsCount++;
return this.num1 + this.num2;
}
}
})
document.querySelector("button").addEventListener("click", () => {
console.log(`computed调用了${computedCount}次`);
console.log(`methods调用了${methodsCount}次`);
},)
</script>
</body>
使用建议
计算属性，故名思意，当多个属性通过大量计算才能得到结果时当使用计算属性，因为它具有缓存特性调用次数较少所以性能比使用methods要高。
你只能调用一次计算属性，剩下的都是被动调用。
方法则是与事件做对应的，所以不应该使用方法来执行对属性的计算，方法具有主动调用的特性，你可以多次进行主动调用，当然它也可以自动调用。
Vue 计算属性与方法的更多相关文章
- vue计算属性和方法的区别
计算属性: <div id="example"> <p>{{ now }}"</p> </div> <script& ...
- vue的计算属性与方法的不同
计算属性 vue的模板里可以使用表达式,但是它的设计初衷是用于简单计算,在模板中放入太多逻辑会让模板过重且难以维护.例如: <div id="example"> {{ ...
- vue.js使用之计算属性与方法返回的差别
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@2.4.2&quo ...
- Vue计算属性缓存(computed) vs 方法
Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...
- Vue计算属性
github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- vue 计算属性 实例选项 生命周期
vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...
- vue——计算属性和侦听器
一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...
- vue计算属性和观察者
1. 计算属性 模板内的表达式非常便利,但在模板中放入太多的逻辑会让模板过重且难以维护,所有就有了计算属性 例子: //html代码 <div id="example"> ...
随机推荐
- rabbitmq之后台管理和用户设置
前言 前面介绍了erlang环境的安装和rabbitmq环境安装,接下来介绍rabbitmq的web管理和用户设置. 启用后台管理插件 通过后台管理插件我们可以动态监控mq的流量,创建用户,队列等. ...
- echo 输出颜色
shell脚本里使用echo输出颜色 echo命令颜色显示: echo: -n: 不换行. -e:让转移符生效. \t(tab) \n (换行) 实例: $ echo ...
- STM32芯片型号的命名规则
意法半导体已经推出STM32基本型系列.增强型系列.USB基本型系列.增强型系列:新系列产品沿用增强型系列的72MHz处理频率.内存包括64KB到256KB闪存和20KB到64KB嵌入式SRAM.新系 ...
- <bdi> 标签
bdi 指的是 bidi 隔离. <bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置. 在发布用户评论或其他您无法完全控制的内容时,该标签很有用. 实例 把用户名从周围的文 ...
- Go之NSQ简介,原理和使用
NSQ简介 NSQ是Go语言编写的一个开源的实时分布式内存消息队列,其性能十分优异. NSQ 是实时的分布式消息处理平台,其设计的目的是用来大规模地处理每天数以十亿计级别的消息.它具有分布式和去中心化 ...
- Easyswoole的WaitGroup和Csp组件的分析和使用
Easyswoole的WaitGroup和Csp组件的分析和使用 easyswoole可真是个好名字,只是提供了恰到好处的封装,即使是源码也保持了这样的风格.这种风格不论好坏可能都需要各位适应下,哈哈 ...
- Windows定时任务copy到nfs目录
@echo off mount 192.168.5.10:/data/test x: xcopy /y "D:\backup\mysql\20200316_230000.sql.tar.gz ...
- 这个蒟蒻也开通wordpress博客啦~
RT,欢迎各位dalao常来菜鸡博客玩,加友链什么的最好了~ 传送门(请注意https不能漏,因为本菜鸡的家用宽带只有443端口). 以后博客园的博客会同步更新. 这个人太颓了,只打算在wordpre ...
- C#中的release和debug模式
以下内容来源:https://www.cnblogs.com/rgjycs/p/9254332.html 在程序调试时的debug和release 网上有如下的描述:Debug 通常称为调试版本,它包 ...
- UVA12558 埃及分数 Egyptian Fractions
题意描述 题目描述的翻译挺清楚的了. 和原题的区别是多了禁用的分母.(还有毒瘤输入输出) 算法分析 显然这道题没有什么很好的数学方法来解决,所以可以使用搜索. 由于不确定深度,深搜显然无穷无尽. 所以 ...