实例分析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= "< ...
随机推荐
- linux基础和vim基本使用
Liunx基础 1. 目录 /:根目录,一般根目录只存放目录,在linux下有且只有一个根目录.所有的东西都是从这里开始,例如:/home就是先从根目录/开始,再进入到home目录. /bin ...
- 论文笔记(2)：A fast learning algorithm for deep belief nets.
论文笔记(2):A fast learning algorithm for deep belief nets. 这几天继续学习一篇论文,Hinton的A Fast Learning Algorithm ...
- PAT1002:A+B for Polynomials
1002. A+B for Polynomials (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue T ...
- 数据分析之---Python可视化工具
1. 数据分析基本流程 作为非专业的数据分析人员,在平时的工作中也会遇到一些任务:需要对大量进行分析,然后得出结果,解决问题. 所以了解基本的数据分析流程,数据分析手段对于提高工作效率还是非常有帮助的 ...
- C3垂直居中均分
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 在阿里云的CentOS环境中安装配置MySQL、JDK、Maven
Welcome to Alibaba Cloud Elastic Compute Service ! [root@izbp19stm1x1k2io1e7r3tz ~]# rpm -Uvh http:/ ...
- Servlet、Filter
加载顺序是:context-param -> listener -> filter -> servlet ,而同个类型之间的实际程序调用的时候的顺序是根据对应的 mapping 的顺 ...
- Collection集合详解
/*Collection--List:元素是有序的,元素可以重复.因为该集合体系有索引. ---ArrayList;底层的数据结构使用的是数组结构.特点:查询速度很快.但是增删很慢.线程不同步 --- ...
- 23.app后端如何架设文件系统
现在app展现内容的形式多种多样的,有文字,图片,声音,视频等等,其中文件占了一个很大的比重.随着app不断运营,文件会越来越多,占用的磁盘空间也不断增大,架设一套高效的文件系统,对于整个app架构有 ...
- 排序系列 之 快速排序算法 —— Java实现
基本思想: 通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变 ...