computer、methods和watch
在vue中处理复杂的逻辑的时候,我们经常使用计算属性computer,但是很多时候,我们会把计算属性、方法和侦听器搞混淆,在 w3cplus.com的一篇文章中是这样总结这三者的。
methods
:正如他的名字一样,它们是挂载在对象上的函数,通常是Vue实例本身或Vue组件。computed
:属性最初看起来像一个方法,但事实却又不是方法。在Vue中,我们使用data
来跟踪对特定属性的更改,得到一定的反应。计算属性允许我们定义一个与数据使用相同方式的属性,但也可以有一些基于其依赖关系的自定义逻辑。你可以考虑计算属性的另一个视图到你的数据。watchers
:这些可以让你了解反应系统(Reactivity System)。我们提供了一些钩子来观察Vue存储的任何属性。如果我们想在每次发生变化时添加一些功能,或者响应某个特定的变化,我们可以观察一个属性并应用一些逻辑。这意味着观察者的名字必须与我们所观察到的相符。
如果仅仅只是看这段话,可能还是不能很清除的明白三者的区别,我们可以通过相关的实例来对三者进行区分。
computed
计算属性是根据依赖关系进行缓存的计算,并且只在需要的时候进行更新。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<p>原数据{{message}}</p>
<p>反转后的数据{{reversedMessage}}</p>
<button @click="add()">补充货物1</button>
<div>总价为:{{price}}</div>
</div>
<script>
var demo = new Vue({
el: '#demo',
data: {
message :'abcdefg',
package: {
count: 5,
price: 5
},
},
computed:{
reversedMessage:function(){
return this.message.split('').reverse().join('')
},
price: function(){
return this.package.count*this.package.price
}
},
methods: {
add: function(){
this.package.count++
}
}
})
</script>
</body>
</html>
上面的例子中展示了计算属性的两种用法:一个计算属性里面可以完成各种复杂的逻辑,最终返回一个结果;计算属性可以依赖多个vue实例的数据,只要其中一个任何一个数据发生变化,计算属性就会重新执行,视图也会更新。除此之外,计算属性还可以依赖其他计算属性和其他实例的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app1">{{text}}</div>
<div id="app2">{{ reverseText}}</div>
<script>
var app1 = new Vue({
el: '#app1',
data: {
text: 'computed'
}
}); var app2 = new Vue({
el: '#app2',
computed: {
reverseText: function(){
return app1.text.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
methods
在使用vue的时候,可能会用到很多的方法,它们可以将功能连接到事件的指令,甚至只是创建一个小的逻辑就像其他函数一样被重用。接下来我们用方法实现上面的字符串反转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<p>原数据{{message}}</p>
<p>反转后的数据{{ reversedMessage() }}</p>
</div>
<script>
var demo = new Vue({
el: '#demo',
data: {
message :'abcdefg',
num:5
},
methods:{
reversedMessage(){
return this.message.split('').reverse().join('')
},
}
})
</script>
</body>
</html>
watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<button @click='a++'>a加1</button>
<p>{{message}}</p>
</div>
<script>
var demo = new Vue({
el: '#demo',
data: {
message :'',
a:1
}, watch:{
a:function(val,oldval){
this.message = 'a的旧值为' + oldval + ',新值为' + val;
}
}
})
</script>
</body>
</html>
深度监听
在上面的例子中,监听的简单的数据类型,数据改变很容易观察,但是当需要监听的数据变为对象类型的时候,上面的监听方法就失效了,因为上面的简单数据类型属于浅度监听,对应的对象类型就需要用到深度监听,只需要在上面的基础上加上deep: true就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="item in list">
<input type="text" v-model="item.val" />
</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
list:[
{val: ''},
{val:''}
]
},
watch: {
list:{
handler: function (val, oldVal) {
alert('数据改变了');
},
deep: true
}
},
})
</script>
</body>
</html>
computer、methods和watch的更多相关文章
- Computer Vision_18_Image Stitching: Image Alignment and Stitching A Tutorial——2006(book)
此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...
- Computer Vision_18_Image Stitching:Automatic Panoramic Image Stitching using Invariant Features——2007
此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...
- Computer Vision_18_Image Stitching: Image Alignment and Stitching——2006
此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...
- Image Processing and Computer Vision_Review:Local Invariant Feature Detectors: A Survey——2007.11
翻译 局部不变特征探测器:一项调查 摘要 -在本次调查中,我们概述了不变兴趣点探测器,它们如何随着时间的推移而发展,它们如何工作,以及它们各自的优点和缺点.我们首先定义理想局部特征检测器的属性.接下来 ...
- 第一个ruby程序
老实说不是很喜欢去讨论ruby和python的对比,似乎总是把两个语言放在对立的位置上,我觉得没有必要,同样是动态语言,同样是解释型脚本语言,很多特性都是互相影响的,语言本身也在不断进化,我们更应该关 ...
- [Z] 计算机类会议期刊根据引用数排名
一位cornell的教授做的计算机类期刊会议依据Microsoft Research引用数的排名 link:http://www.cs.cornell.edu/andru/csconf.html Th ...
- paper 60 :转载关于视觉SCI期刊
ChanLee_1整理的计算机视觉领域稍微容易中的期刊 模式识别,计算机视觉领域,期刊 (1)pattern recognition letters, 从投稿到发表,一年半时间 (2)Pattern ...
- A simple test
博士生课程报告 视觉信息检索技术 博 士 生:施 智 平 指导老师:史忠植 研究员 中国科学院计算技术研究所 2005年1月 目 ...
- Fzreo matlab
fzero Root of nonlinear function collapse all in page Syntax x = fzero(fun,x0) example x = fzero(fun ...
- 计算机视觉和模式识别领域SCI期刊介绍
原帖地址: http://blog.sciencenet.cn/blog-370458-750306.html 关于计算机视觉和模式识别领域的期刊并不是很多,下面我收集了一些该领域的代表性期刊,并介绍 ...
随机推荐
- c++中的stl
String Vector Set List Map 1.string char* s1 = "Hello SYSU!"; //创建指针指向字符串常量,这段字符串我们是不能修改的 ...
- 组合数的求法 (n<=1e8 可以过来看)
C(n,m) =n!/(m!* (n-m)! ); o(n) 求 1-m的逆元 o(n) 求 n的阶乘 代码实现 https://www.cnblogs.com/linyujun/p/5194189 ...
- rsync入门使用
rsync是用来同步文件的,但是是基于增量同步的,也就是说每次同步时不需要把全部文件数据都传输过去,只需要将不相同的部分(也就是说增量差异内容)传输过去. 其基本命令格式为rsync [option] ...
- linux查看网络信息命令
#遇到一条很长的命令怎么办,想换行的时候在末尾增加\符号就可以换行继续输入命令了 #在ifconfig内容中找出ip [root@bogon ~]# ifconfig ens33|grep " ...
- Module Sources
转自:https://www.terraform.io/docs/modules/sources.html 主要记录module source 的格式 The source argument in a ...
- The Microservices Workflow Automation Cheat Sheet
Written by Bernd Rücker on Dec 12 2018 in the Best Practices category. Editor’s Note: This post orig ...
- SharePoint Online 怎样让用户只能拥有sub site 的权限
大家使用SharePoint 可能遇到这样的问题. 我怎样能设置manager 为site 的管理人员. 而我收下不同部门的员工只能访问他自己的sub site呢? 这个设置其实很简单. 1. 简 ...
- 漫谈 C++ 的 内存堆 实现原理
如果我来设计 C++ 的 内存堆 , 我会这样设计 : 进程 首先会跟 操作系统 要 一块大内存区域 , 我称之为 Division , 简称 div . 然后 , 将这块 div 作为 堆 , 就可 ...
- operator <<”不明确
在声明重载的输出运算符<< 时,如果声明时的返回类型是std::ostream,而不是std::ostream&,但是定义的时候又加了引用的话,那么就会报“operator < ...
- bind智能DNS + bindUI管理系统
bind UI 管理系统 https://github.com/cucker0/BindUI # bind安装 cd /usr/local/src wget http://ftp.isc.org/is ...