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"> ...
随机推荐
- git-submodule子模块的添加、使用和删除
目录 添加 使用 更新 删除 hugo添加主题的时候 命令如下: git submodule add https://github.com/samrobbins85/hugo-developer-po ...
- spring boot:使用validator做接口的参数、表单、类中多字段的参数验证(spring boot 2.3.1)
一,为什么要做参数验证? 永远不要相信我们在后端接收到的数据, 1,防止别人通过接口乱刷服务:有些不怀好意的人或机构会乱刷我们的服务,例如:短信接口, 相信大家可能很多人在工作中遇到过这种情况 2,防 ...
- rabbitmq与erlang版本
来源自https://www.rabbitmq.com/which-erlang.html erlang安装包下载地址 https://packages.erlang-solutions.com/er ...
- selenium 设置代理ip
from selenium import webdriver options = webdriver.ChromeOptions() options.add_argument("--prox ...
- textarea在编程中的实际应用
<textarea> 标签定义多行的文本输入控件. 文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier) 实例 <textarea rows=&qu ...
- 完美解决pyinstaller 打包报错找不到依赖pypiwin32 或pywin32-ctypes的错误
报错信息 最近闲来无事,用python的tkinter库开发了一款带日程提醒的万年历桌面程序.在程序开发结束开始打包时,却发现一直报错 PyInstaller cannot check for ass ...
- 第二个 SignalR，可以私聊的聊天室
一.简介 上一次,我们写了个简单的聊天室,接下来,我们来整一个可以私聊的聊天室. SignalR 官方 API 文档 需求简单分析: 1.私聊功能,那么要记录用户名或用户ID,用于发送消息. 2.怎么 ...
- poj2187 Beauty Contest （凸包 + 旋转卡壳）
Beauty Contest Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 38349 Accepted: 11851 ...
- 关于 Deployer 部署结构
Deployer 部署完成后,在服务器上的结构会是这样子: drwxr-sr-x 5 deployer www-data 4096 Jun 14 09:53 ./ drwxr-sr-x 6 deplo ...
- 快来，我悄悄的给你说几个HashCode的破事。
这是why技术的第 72 篇原创文章 Hash冲突是怎么回事 在这个文章正式开始之前,先几句话把这个问题说清楚了:我们常说的 Hash 冲突到底是怎么回事? 直接上个图片: 你说你看到这个图片的时候想 ...