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"> ...
随机推荐
- go mod模式，引入自己的包，goland飘红
- spring boot:使用spring cache+caffeine做进程内缓存(本地缓存)(spring boot 2.3.1)
一,为什么要使用caffeine做本地缓存? 1,spring boot默认集成的进程内缓存在1.x时代是guava cache 在2.x时代更新成了caffeine, 功能上差别不大,但后者在性能上 ...
- 使用pyenv实现python多版本共存
背景 如果是Ubuntu等桌面系统,都已经更新到了Python较新的版本.但多数生产环境使用的还是红帽系统. CentOS7默认还是Python2.7,而开发环境如果是高版本Python就带来了问题. ...
- Docker知识总结
目录 1 安装docker 2 docker基本概念 2.1 Docker是容器化平台 2.2 Docker体系结构 2.3 容器与镜像 3 docker常用命令 3.1 快速安装tomcat 3.1 ...
- 【API进阶之路】研发需求突增3倍，测试团队集体闹离职
摘要:最近研发的需求量涨了3倍,开发团队拼命赶进度,可苦了测试团队. 本以为从一线研发转管理后会清闲一些,但是没想到,我还要充当救火队员的角色. 到了第四季度,各业务部门都在憋着劲儿冲业绩,毕竟这跟年 ...
- dilated conv、deconv、fractional-strided conv
deconv的其中一个用途是做upsampling,即增大图像尺寸. dilated convolution: dilated conv,中文可以叫做空洞卷积或者扩张卷积. 首先是诞生背景,在图像分割 ...
- PCB layout注意事项
1.信号线一般12mil以上,选15或20左右及以上 via内外径选2倍关系的,如内径10mi外径20mil,但不是绝对,内10外15.18也可. 2.mil与mm单位转换,即100mil=2.54m ...
- 利用云主机搭建MySQL服务器
前言:有了一台云服务器之后,就想着如何物尽其用.利用其不关机(意外除外)的特性,我们可以在服务器上安装数据库服务,实现云数据库服务器,这样就可以随时随地的访问数据库了,不再受各种限制. 这里以MySQ ...
- vue学习笔记（六） ----- vue组件
一.模块化与组件化 模块化的定义 模块化在Node中是一个规范,定义一些模块的相关的规则,从代码角度上来说,方便做区别,如果不使用模块化,写在js文件中不利于后期维护和扩展,从代码的层面上就把相关的功 ...
- Disruptor 使用简介
[开发总结]Disruptor 使用简介 在极客时间看到王宝令老师关于 Disruptor 的一篇文章,觉得很有意思.看完之后又在网上找到一些其他关于Disruptor 的资料看了一下. 现在写篇文章 ...