实例分析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= "< ...
随机推荐
- 微信小程序-统一下单、微信支付(Java后台)
1.首先分享 微信统一下单接口: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1 微信接口 签名 对比网址: https: ...
- react 高阶组件的 理解和应用
高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件.(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装: 具体的是高阶组件的两种形式吧: ...
- Java NIO Scatter / Gather
原文链接:http://tutorials.jenkov.com/java-nio/scatter-gather.html Java NIO发布时内置了对scatter / gather的支持.sca ...
- Ractive 的 认识
1 前言 Ractive.js是一款入门容易却功能强大的JS库,它的主旨是模板+数据=UI,数据的双向绑定,DOM节点的实时更新,事件处理等多个有用的功能.它吸取了AngularJS中的一些灵感,因此 ...
- Spring boot +Spring Security + Thymeleaf 认证失败返回错误信息
[Please make sure to select the branch corresponding to the version of Thymeleaf you are using] Stat ...
- javaweb项目部署到tomcat服务器
http://jingyan.baidu.com/album/a501d80c0c65baec630f5ef6.html?picindex=8
- app后端设计(2)--xmpp的使用（2014.01.14更新）
在app中有时候是需要添加聊天服务,在这里谈谈曾经开发聊天服务的经验: (1)聊天服务端选的openfire,这是一个基于xmpp协议的聊天服务器(XMPP是一种基于XML的协议,它继承了在XML环境 ...
- 最新的爬虫工具requests-html
使用Python开发的同学一定听说过Requsts库,它是一个用于发送HTTP请求的测试.如比我们用Python做基于HTTP协议的接口测试,那么一定会首选Requsts,因为它即简单又强大.现在作者 ...
- Python Assert 为何不尽如人意
Python中的断言用起来非常简单,你可以在assert后面跟上任意判断条件,如果断言失败则会抛出异常. >>> assert 1 + 1 == 2 >>> ass ...
- django(权限、认证)系统——User模型
在Django的世界中,在权限管理中有内置的Authentication系统.用来管理帐户,组,和许可.还有基于cookie的用户session.这篇blog主要用来探讨这套内置的Authentica ...