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协程与并发(转)
理解Go协程与并发 协程 Go语言里创建一个协程很简单,使用go关键字就可以让一个普通方法协程化: Copy package main import ( "fmt" " ...
- spring boot:redis+lua实现顺序自增的唯一id发号器(spring boot 2.3.1)
一,为什么需要生成唯一id(发号器)? 1,在分布式和微服务系统中, 生成唯一id相对困难, 常用的方式: uuid不具备可读性,作为主键存储时性能也不够好, mysql的主键,在分库时使用不够方便, ...
- php 反射 实例化类
<?php class Person { public $name; public $sex; public function __construct($name,$sex=1) { $this ...
- linux(CentOS7)_离线_mysql安装
注意:本文系统环境 CentOS 7.7 64位 MySQL Community Server 5.7.32 一丶卸载CentOS7系统中默认的数据库mariadb 原因一:ps原作者的话介绍下背景: ...
- 前端基础——HTML(二)
HTML标签 标题标签<h1>.<h2>.<h3>.<h4>,标题标签之间是不能嵌套的,下一级标题与上级标题之间通过同级 关于书写,下级标题解释说明的是 ...
- 今天 1024，为了不 996，Lombok 用起来以及避坑指南
Lombok简介.使用.工作原理.优缺点 Lombok 项目是一个 Java 库,它会自动插入编辑器和构建工具中,Lombok 提供了一组有用的注解,用来消除 Java 类中的大量样板代码. 目录 L ...
- AngularJS——ui-router
深究AngularJS--ui-router详解 原创 2016年07月26日 13:45:14 标签: angularjs / ui-router / ui-view 25043 1.配置使用ui- ...
- EasyExcel使用心得
最近项目中用到了阿里easyExcel做导入导出功能 下面是我写的一个工具类,带泛型的.拿来即用,有需求的小伙伴可以看看. 同时也欢迎大佬提出修改意见. 一.首先先写一个生成Excel表头的DTO类, ...
- cmd中执行mvn help:system报错的解决办法
[ERROR] No plugin found for prefix 'help' in the current project and in the plugin groups [org.apach ...
- ModelSerializer 高级使用
前言 ModelSerializer中还具有一些高级用法,如批量更新.批量删除.批量创建等. 但是批量过来的数据格式都需要与前端做好协商,什么样的数据格式是单条操作,什么样的数据格式是批量操作. 如下 ...