实例分析Vue.js中 computed和methods不同机制
在vue.js中，有methods和computed两种方式来动态当作方法来用的
1.首先最明显的不同 就是调用的时候，methods要加上（）
2.我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行
为了方便理解，先上一段源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head> <body>
<div class="test"> <!--computed计算属性-->
<p>{{now}}</p>
<p>{{now}}</p>
<p>{{now}}</p>
<p>{{now}}</p>
<hr /> <!--横线分割-->
</div>
<div class="test2"> <!--methods方法，注意new（）加了括号-->
<p>{{now()}}</p>
<p>{{now()}}</p>
<p>{{now()}}</p>
<p>{{now()}}</p>
</div>
</body> <script type="text/javascript">
var myVue = new Vue({
el: ".test",
computed: {
now: function() {
var yanshi = 0;
for(var o = 0; o < 2000; o++) { //延时
for(var q = 0; q < 2000; q++) {
yanshi++;
}
}
return Date.now()
}
}
});
var vue2 = new Vue({
el: '.test2',
methods: {
now: function() {
var yanshi = 0;
for(var o = 0; o < 2000; o++) {
for(var q = 0; q < 2000; q++) {
yanshi++;
}
}
return Date.now()
}
}
})
</script> </html>
运行结果如上，可以看出computed计算属性的话，每次进入页面将一直沿用第一次的信息，不会再触发now，这就是依赖缓存。（有延时的情况下 多次输出时间相同）
那什么是相关依赖发生改变时才会重新取值呢 比方说reversedMessage function（）计算属性中调用了message变量
就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
而methods是实时的，在重新渲染时，函数总会重新调用执行，不会缓存，（多次输出时间不同）
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：所以其实computed也是可以传参的。
实例分析Vue.js中 computed和methods不同机制的更多相关文章
- Vue.js中 computed 和 methods 的区别
官方文档中已经有对其的解释了,在这里把我的理解记录一下Vue中的methods.watch.computed computed 的使用场景 HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护 ...
- vue中computed与methods的异同
在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...
- vue.js 中 data, prop, computed, method，watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- vue.js中，input和textarea上的v-model指令到底做了什么？
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- vue.js中的slot
vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...
- vue.js 中使用（...）运算符报错的解决方法
vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...
- vue.js中父组件触发子组件中的方法
知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...
随机推荐
- Python_正则表达式样例
''' 正则表达式是字符串处理的有力工具和技术,正则表达式使用预定义的特定模式去匹配一类具有共同特征的字符串, 主要用于字符串处理,可以快速.准确地完成复杂的查找.替换等处理要求. 正则表达式由元字符 ...
- Java并发之乐观锁悲观锁
定义 乐观锁和悲观锁这两种锁机制,是在多用户环境并发控制的两种所机制. 悲观锁:假定会发生并发冲突,屏蔽一切可能违反数据完整性的操作.[1]常见实现如独占锁.乐观锁:假设不会发生并发冲突,只在提交操作 ...
- Selenium自动化测试-unittest单元测试框架
一.Pyhon工作原理-- 核心概念:test case, testsuite, TestLoder,TextTestRunner,TextTestResult, test fixture TestC ...
- Oracle客户端安装教程
链接:http://jingyan.baidu.com/article/3d69c55165bc94f0cf02d7d9.html (按照此链接不会安装错误)
- mysql中float类型使用总结
对于单精度浮点数Float: 当数据范围在±131072(65536×2)以内的时候,float数据精度是正确的,但是超出这个范围的数据就不稳定,没有发现有相关的参数设置建议:将float改成dou ...
- 设置ActiveMQ的访问密码
1.设置ActiveMQ的访问密码,以提高ActiveMQ的安全性 2.在ActiveMQ的conf目录的activemq.xml中添加账号密码 2.1 添加的代码如下 <!-- 添加访问Ac ...
- 0517JS综合练习、挂事件练习
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 由一条sql语句想到的子查询优化
摘要:相信大家都使用过子查询,因为使用子查询可以一次性的完成很多逻辑上需要多个步骤才能完成的SQL操作,比较灵活,我也喜欢用,可最近因为一条包含子查询的select count(*)语句导致点开管理系 ...
- Python字符编码与转码
字符编码与转码 注: 该图转自 http://www.cnblogs.com/luotianshuai/p/5735051.html. Python2 解码,编码 #Python2 #-*- codi ...
- Java Script 学习笔记 (二) Casper JS
1. click() VS mouse.click() 在写自动化脚本要勾选一个复选框时,用casper.mouse.click() 无法选上这个checkbox, 需要用到casper.click( ...