Vue.js系列之四计算属性和观察者
一、计算属性
1、模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的。在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方,模版不在是简单的声明式逻辑,你必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串,当你想要在模版中多次引用此处的翻转字符串时,就会更加难以处理.
所以,任何复杂逻辑，你都应当使用计算属性,基础例子如下:
<body>
<div id="currentPage">
<p>Original message:"{{message }}"</p>
<p>Computed reversed message:"{{reversedMessage }}"</p>
</div>
</body>
<script type="text/javascript">
var currPage=new Vue({
el:"#currentPage",
data:{
message:"https://www.baidu.com"
},
computed:{
reversedMessage:function () {
return this.message.split('').reverse().join('')
}
}
});
</script>
2、计算属性缓存vs方法
上面的功能通过方法也可以实现,但是通过方法和计算属性实现相同的功能是有区别的,虽然两种计算方式的最终结果完全相同。然而,不同的计算属性是基于它们的依赖进行缓存的.计算属性只有在相关依赖发生改变时才会重新求值。这意味着只要message没有发生改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数.这意味着下面的计算属性不再更新,因为Date.Now()不是响应式依赖,代码如下:
computed: {
now: function () {
return Date.now()
}
}
相比之下,每当触发重新渲染,调用方法总会再次执行函数.
3、计算属性为什么需要缓存
假设我们有一个性能开销比较大的计算属性A,它需要便利一个巨大的数组并作大量的计算,然后我们可能有其它的属性依赖A,如果没有缓存,我们将不可避免的多次执行A的getter!当然如果你不需要缓存,请用方法来替代.
4、计算属性Vs侦听属性
Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动:侦听属性。当你有一些数据需要随着其他属性的变动而变动时,很容易滥用watch,特别是使用过AngularJS,代码如下:
<body>
<div id="pageIndex">
<p>{{fullName}}</p>
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#pageIndex",
data:{
firstName:"Stepen",
lastName:"Curry",
fullName:"Stepen Curry"
},
watch:{
firstName:function (val) {
this.fullName=val+' '+this.lastName;
},
lastName:function (val) {
this.fullName=this.firstName+' '+this.lastName;
}
}
});
</script>
上面通过watch属性能很好的解决属性联动的问题,但是Vue提供了一种跟好的方式来解决这个问题,计算属性,代码如下:
<body>
<div id="pageIndex">
<p>{{fullName}}</p>
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#pageIndex",
data:{
firstName:"Stepthen",
lastName:"Curry"
},
computed:{
fullName:function(){
return this.firstName+' '+this.lastName;
}
}
});
</script>
比较两种属性联动的方法显然,计算属性相比watch要好得多.
5、计算属性的setter
计算属性在你不指定setter的时候,只有getter,当然有些时候我们可能会对计算属性进行特殊的处理,这个时候就需要使用setter,比如我们需要对上面例子中的fullName进行额外的处理,代码如下:
<body>
<div id="pageIndex">
<p>{{fullName}}</p>
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#pageIndex",
data:{
firstName:"Stepthen",
lastName:"Curry"
},
computed:{
fullName:{
get:function(){
return this.firstName+' '+this.lastName;
},
set:function (newFullName) {
var names=newFullName.split(',');
this.firstName=names[0];
this.lastName=names[names.length-1];
}
}
}
});
</script>
当在控制台中运行currentPage.fullName='xiao,chao',set方法会被调用,currentPage.firstName和currentPage.lastName也会被相应地更新.
6、watch侦听器
虽然计算属性在大多数情况下更合适,但是有时需要一个自定义的侦听器,这就是为什么Vue通过watch选项提供了一个更通用的方法,来响应数据的变化。当需要数据变化时,执行异步或开销更大的操作时,这个方法是最有用的.
<body>
<div id="pageIndex">
<p>
<input v-model="question" />
</p>
<p>{{answer}}</p>
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#pageIndex",
data:{
question:'',
answer:'请在输入框输入你的问题!'
},
watch:{
question:function (newQuestion) {
this.answer='服务器正在处理你的问题,请稍候......';
this.getAnswer();
}
},
methods:{
getAnswer:function () {
//这里放ajax方法
setTimeout(function () {
currentPage.answer='服务器返回的答案';
},500);
}
}
});
</script>
在这个示例中,使用watch选项允许我们执行一个异步操作(访问你个api),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态.这些都是计算属性无法做到的.
Vue.js系列之四计算属性和观察者的更多相关文章
- vue.js初探：计算属性和methods
在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
- vue.js使用之计算属性与方法返回的差别
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@2.4.2&quo ...
- 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue.js系列之三模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- 前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue
前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...
- vue计算属性和观察者
1. 计算属性 模板内的表达式非常便利,但在模板中放入太多的逻辑会让模板过重且难以维护,所有就有了计算属性 例子: //html代码 <div id="example"> ...
- 初识Vue——计算属性和观察者
一.计算属性 在模板内使用 1.基础例子 <template> <div class="main"> <div id="reverse_st ...
- Vue.js 系列教程 4：Vuex
这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理. 这不是一个完整的指南,而是基础知识的概述,所以你可以了解 Vue.js 以 ...
随机推荐
- js数组合并（一个数组添加到另一个数组里面）方法
js定义两个数组. var arrA=[1,2,3]; var arrB=[4,5,6]; 要实现[1,2,3,4,5,6],如果直接arrA.push(arrB); 则arrB只会作为了arrA的一 ...
- linux系统编程之进程（五）：exec系列函数（execl,execlp,execle,execv,execvp)使用
本节目标: exec替换进程映像 exec关联函数组(execl.execlp.execle.execv.execvp) 一,exec替换进程映像 在进程的创建上Unix采用了一个独特的方法,它将进程 ...
- java报错java/lang/NoClassDefFoundError: java/lang/Object
安装完java出错 javac和java -version 都无效,报错如上 解决方法,更改文件中的两个文件(前提是你的 vim /etc/profile 文件路径写的正确) /usr/java/ ...
- Android线程和线程Handler基础一览
线程概览 线程是任何多任务系统的基石.可以被认为是一个主进程的多个子进程.这样做的目的就是了增加应用的性能. 应用主线程 当一个Android应用被打开的时候,系统会默认开辟一个线程.这个线程就被叫做 ...
- 用Socket开发的一枚小型实时通信App
Socket 英文原意是插座. 在网络世界里, 当一台主机温柔而体贴的同时提供多个服务时, 每个服务被绑定在一个端口上, 而每个端口就好像一个小插座. 用户们连接对应的插座去获取相应的服务. 在Nod ...
- 团队项目（第四周之一）—GG队
Alpha认领任务: 叶尚文:对应键盘监听结果的动画以及计算 于泽浩:制作背景gif图,并保证能在程序中循环播放 龙剑初:项目进度跟进及博客更新 杜婷萱:把图片结合起来,设置云朵透明度的变化 蔡晓晴: ...
- Python学习-36.Python中的字典解释
具体同列表解释,也是使用if来进行过滤 例子,生成一个新的字典,并且是原来字典的键值交换. mydict={'Tom':18,'Mary':20} print({value:key for key,v ...
- visual studio code 中隐藏从 ts 文件生成的 js 文件和 map 文件
typescript 文件编译产生的 js 和 map 文件不需要手工编辑,打开[文件][首选项][工作区设置],放入以下代码: // 将设置放入此文件中以覆盖默认值和用户设置. { "fi ...
- 自适应XAML布局经验总结 （三） 局部布局设计模式2
本系列对实际项目中的XAML布局场景进行总结,给出了较优化的自适应布局解决方案,希望对大家有所帮助. 下面继续介绍局部布局设计模式. 5. 工具箱模式 绘图,三维模型操作等需要工具的情况,可以使用带分 ...
- LeetCode133：Clone Graph
题目: Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. ...