vue的方法和计算属性的区别
首先看看 methods 方法
// html
<div id="vue">
<button v-on:click = "a++">add to a</button>
<button v-on:click = "b++">add to b</button>
<p>a : {{a}}</p>
<p>b : {{b}}</p>
<p>age : {{age}}</p> <-- 使用methods方法 -->
<p>age + a = {{addtoa()}}</p>
<p>age + b = {{addtob()}}</p>
<p>cc = {{cc()}}</p>
</div> // js
new Vue({
el : "#vue", data : {
a : 0,
b : 0,
age : 20,
}, methods: {
addtoa() {
console.log("使用了addtoa 方法");
return this.a + this.age;
},
addtob() {
console.log("使用了addtob 方法");
return this.b + this.age;
},
cc() {
console.log('使用了 cc 方法');
return 'cc';
},
},
})
浏览器打开查看控制台,显示如下
接着点击第一个按钮 ‘ add to a ’,控制台显示如下
点击 ‘ add to a ’,只是让 a 的值加 1,而其他值都没有变化,但发现不是只有 与 a 值有关联的 addtoa 方法执行,而是 methods 里的所有方法都执行了。接着再点击 ‘ add to b ’,你也会发现所有方法都执行了
再看看 computed 计算属性
// html
<div id="vue">
<button v-on:click = "a++">add to a</button>
<button v-on:click = "b++">add to b</button>
<p>a : {{a}}</p>
<p>b : {{b}}</p>
<p>age : {{age}}</p> <!-- 使用computed计算属性,注意没有括号 -->
<p>age + a = {{addtoa}}</p>
<!-- 注意这里又计算了一次 addtoa -->
<p>age + a = {{addtoa}}</p>
<p>age + b = {{addtob}}</p>
<p>cc = {{cc}}</p>
</div> // js
new Vue({
el: "#vue", data: {
a: 0,
b: 0,
age: 20,
}, computed : {
addtoa() {
console.log("使用了addtoa 属性")
return this.a + this.age;
},
addtob() {
console.log("使用了addtob 属性")
return this.b + this.age;
},
cc() {
console.log('使用了 cc 属性')
return 'cc'
},
},
})
浏览器打开查看控制台,显示如下
接着点击第一个按钮 ‘ add to a ’,控制台显示如下
发现 html 中明明写了两次 addtoa 属性,但是一开始只打印了一行 ‘ 使用了addtoa 属性 ’,而且当改变 a 值后,只有与数据有关的属性 即 addtoa 才重新计算了,而且同样也是只打印一行 ‘ 使用了addtoa 属性 ’
总结
两个例子中函数被定义成 方法 或 属性,就最终结果上来看其实都是一样的
但是计算属性是基于响应式依赖进行缓存的,只有数据发生变化时,才会重新计算,否则直接调用缓存
因此计算属性 相比 methods 方法更加的节省性能
对于任何复杂的逻辑,都应该使用计算属性
vue的方法和计算属性的区别的更多相关文章
- Vue(十一)计算属性
计算属性 1. 基本用法 计算属性也是用来存储数据,但具有以下几个特点: a.数据可以进行逻辑处理操作 b.对计算属性中的数据进行监视 2.计算属性 vs 方法 将计算属性的get函数定义为一个方法也 ...
- vue.js初探:计算属性和methods
在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...
- Vue-比较方法、计算属性和侦听器
分别用方法.计算属性和侦听器实现当fristName和lastName改变时,fullName跟着改变. 一.方法: html: <div id="app"> {{fu ...
- Vue.js系列之四计算属性和观察者
一.计算属性 1.模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的.在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码: <div id="example&quo ...
- Vue生命周期,计算属性、方法、侦听器
vue实例和组件都有生命周期函数,beforeCreate()实例或组件没有被创建的时候执行的钩子函数:created()是实例或组件被创建完成的时候执行的钩子函 数:beforeMount()函数是 ...
- vue.js使用之计算属性与方法返回的差别
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@2.4.2&quo ...
- Vue基础练习之计算属性、方法、监听器
<body> <div id="root"> {{fullName()}} {{age}} </div> <script> var ...
- Vue基础进阶 之 计算属性的使用
计算属性的基本使用 初始小示例: 代码: window.onload = () =>{ new Vue({ el:'div', data:{ msg:'' } }) } </script& ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
随机推荐
- HDU 1398 Square Coins(母函数或dp)
Square Coins Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- GB2312,GBK,GB18030,UTF8四种汉字编码标准有什么差别和联系
从GB2312.GBK 到 GB18030,这些编码方法是向下兼容的,即同一个字符在这些方案中总是有同样的编码,后面的标准支持很多其它的字符.在这些编码中,英文和中文能够统一地处理. 区分中文编 ...
- 文件宝局域网传输/播放功能使用帮助(Windows电脑用户)
使用局域网账户密码登录,可以访问电脑上所有文件 使用游客无账户密码登录,只能访问电脑上指定共享文件夹的文件. 1.怎么设置共享文件夹请参考: 方法1 1.在文件资源管理器中选择自己一个想共享的文件夹, ...
- Mongo.setReadPref(mode, tagSet) primaries and secondaries are treated equivalently. 读优先级策略
https://docs.mongodb.com/manual/reference/method/Mongo.setReadPref/#Mongo.setReadPref Mongo.setReadP ...
- Android 返回键的处理
多网友不明确怎样在Android平台上捕获Back键的事件.Back键是手机上的后退键,一般的软件不捕获相关信息可能导致你的程序被切换到后台.而回到桌面的尴尬情况,在Android上有两种方法来获取该 ...
- 【POJ 1159】Palindrome
[POJ 1159]Palindrome 近期各种题各种奇葩思路已经司空见惯了...又新出个滚动数组= = 该题另一点须要知道 最少须要补充的字母数 = 原序列S的长度 - S和S'的最长公共子串长度 ...
- JS是否确认提示 +页面跳转
JS友好提示 +页面跳转 function logout()...{if (confirm("你确定要注销身份吗?是-选择确定,否-选择取消"))...{window.locati ...
- UIActivityIndicatorView控件的属性和方法
对于UIActivityIndicatorView的使用,我们一般会创建一个背景View,设置一定的透明度,然后将UIActivityIndicatorView贴在背景View上,在我们需要的时候将这 ...
- Java类加载器(ClassLoader)
类加载的机制的层次结构 每个编写的”.java”拓展名类文件都存储着需要执行的程序逻辑,这些”.java”文件经过Java编译器编译成拓展名为”.class”的文件,”.class”文件中保存着Jav ...
- #1241 : Best Route in a Grid
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个N行N列的非负整数方阵,从左上角(1,1)出发,只能向下或向右走,且不能到达值为0的方格,求出一条到达右下角的最佳 ...