Vue method与computed的区别
为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。
- 1
- 2
说到这里有没有想到点什么?有没有立马想起html与css样式分离的情况呢。这种写法为我们后期的升级维护留下了空间。
下面我们来看看一个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<div id="app">
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
我在此将三种方式进行了比较。返回的结果是一样的,写但在法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用,必须加().
两种方式在缓存上也大有不同,利用computed计算属性是将 reverseMessage与message绑定,只有当message发生变化时才会触发reverseMessage,而methods方式是每次进入页面都要执行该方法,但是在利用实时信息时,比如显示当前进入页面的时间,必须用methods方式
Vue method与computed的区别的更多相关文章
- Vue中method与computed的区别
为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且 ...
- Vue methods,watch,computed的区别
1. computed(计算属性) 计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算.注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的. eg: < ...
- [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别
一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...
- vue第五单元(v-if和v-show以及v-for的灵活应用 watch以及computed的区别 (常见效果) #课程目标
第五单元(v-if和v-show以及v-for的灵活应用 watch以及computed的区别 (常见效果) #课程目标 精通 v-if v-else v-else-if 的使用 精通 v-show ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- vue、React Nactive的区别(转载)
Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...
- scala之method和function的区别
在我没有学习scala的时候,主要用java和python做日常工作开发,印象中,没有特别的刻意的去区分method和function的区别,这个关系,正如我们日常生活中,没有刻意的去区分质量和重量. ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- vue Watcher分类 computed watch
1.Watcher构造函数源码部分代码 if (options) { this.deep = !!options.deep this.user = !!options.user this.lazy = ...
随机推荐
- 146. LRU 缓存机制 + 哈希表 + 自定义双向链表
146. LRU 缓存机制 LeetCode-146 题目描述 题解分析 java代码 package com.walegarrett.interview; /** * @Author WaleGar ...
- 用vue.js实现的期货,股票的实时K线
用vue.js实现的期货,股票的实时k线 项目地址:https://github.com/zhengquantao/vue-Kline vue-kline 效果图 Build Setup 本项目基于V ...
- 关于个Base64,MD5,16进制的转换
1,待签名数据以UTF-8的格式转字节流,对字节流进行MD5算法得到的签名字节流,再转换为16进制字符串,即生成了数字签名. byte[] targetData = md5.ComputeHash(S ...
- Python数据格式:%s字符串,%d整型,%f浮点型
格式化符% name="Tom" age=int(input("age")) pt2="%s你的年龄是%d"%(name,age) prin ...
- java知识汇总
文章目录 Java基础知识 基本类型 类别及其对应包装类 1. byte---Byte 2. char---Character 3. short---Short 4. int---Integer 5. ...
- protobuf基于java和javascript的使用
目录 ProtoBuf介绍 整理下java和JavaScript的例子 demo测试 java作为服务端+客户端测试 客户端前端调用示例 项目地址 参考 ProtoBuf介绍 ProtoBuf 是go ...
- python之对象与类
1.类的定义 类是一个用户定义类型,类似与c语言中的结构体 class <ClassName>: "类的帮助信息"#类文档字符串 class_suite #类体 其中C ...
- python常见的错误异常
1.AssertionError 该异常在assert()语句运行失败时输出 2.AttributeError 该异常在参考或设置属性失败时输出 eg:class Gs: pass g = Gs() ...
- 前端-CS-04
一:DOM(文档对象模型) document 简写DOM 1.DOM中定义变量用 var 如下截图中:定义demo变量 2.取一个input输入框中的值的方法: 1)先如1中,在dom中顶一个一个变 ...
- C语言宏的使用
使用条件宏进行条件编译 譬如,对于同一份代码,我想编译出两个不同的版本,在其中一个版本中去掉某一部分功能, 这时可以通过条件宏判断是否编译,例: 如果不使用条件宏进行控制,想编译两个不同版本的程序,就 ...