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"> ...
随机推荐
- 【应用服务 App Service】如何移除App Service Response Header中包含的服务器敏感信息
问题描述 有些情况下,当应用部署到App Service上后,在有些Response Header中,可以看见关于服务器的一些信息,这样会导致隐藏的安全问题,所以可以在web.config中移除某些关 ...
- 记一次flink入门学习笔记
团队有几个系统数据量偏大,且每天以几万条的数量累增.有一个系统每天需要定时读取数据库,并进行相关的业务逻辑计算,从而获取最新的用户信息,定时任务的整个耗时需要4小时左右.由于定时任务是夜晚执行,目前看 ...
- 论文解读《Deep Resdual Learning for Image Recognition》
总的来说这篇论文提出了ResNet架构,让训练非常深的神经网络(NN)成为了可能. 什么是残差? "残差在数理统计中是指实际观察值与估计值(拟合值)之间的差."如果回归模型正确的话 ...
- linux启动oracle服务 和监听
(1) su - oracle 切换成oracle 用户 (2)sqlplus / as sysdba (3)startup: (4)quit:退出sql模式 exit 退出oracle用户 (5)l ...
- c语言创建dll以及使用
0x01. declspec(dllexport)创建导出dll 笔者这边使用vs 2015,但是性质都一样的 新建项目 -> Win32控制台应用程序 -> dll 这时候就创建了一个项 ...
- Map 和 Json 互转
Json 转 Map<String,String> String query = "{tableName:\"iov_biz_car_info\",selec ...
- 通过Azure bot framework composer 设计一个AI对话机器人bot（查询天气）
本文介绍通过机器人框架设计器 (Bot framework composer)接近拖拉拽的方式设计一个聊天机器人,该聊天机器人的主要功能是发起http请求查询天气.当然,稍微变通下,可以用来查询几乎任 ...
- Linux 系统编程 学习：00-有关概念
Linux 系统编程 学习:00-有关概念 背景 系统编程其实就是利用系统中被支持的调度API进行开发的一个过程. 从这一讲开始,我们来介绍有关Linux 系统编程的学习. 知识 在进行Linux系统 ...
- python框架Django中MTV框架之Template(模板/界面)
MTV框架之Template(模板/界面) 关注公众号"轻松学编程"了解更多. 1.模板目录位置 应用下 不需要注册 无法跨应用地进行复用 工程下 需要注册 settings.py ...
- CF1320C World of Darkraft: Battle for Azathoth
线段树 又是熟悉的感觉,又是E题写完了,没调完,不过还好上了紫 CF1295E 可以发现可以打败怪兽的关系类似二维偏序 那么首先考虑第一维(武器)以攻击值($a_{i}$)进行排序 把所有的怪兽以防御 ...