Vue计算属性的学习笔记


Posted in Javascript onMarch 22, 2017

本文为大家分享了Vue计算属性的学习笔记,供大家参考,具体内容如下

①模板内的表达式实际上只用于简单的运算,对于复杂逻辑,使用计算机属性。

②基础例子:

<div id = "example"> 
 <p>Original message:"{{message}}"</p> 
 <p>Computed reversed message:"{{reversedMessage}}"</p> 
</div>
var vm = new Vue({ 
 el:"#example", 
 data:{ 
 message:"Hello" 
 }, 
 computed:{ 
 //a computed getter 
 reversedMessage:function(){ 
  //'this' points to the vm instance 
  return this.message.split('').reverse().join('') 
 } 
 } 
})

这里我们声明了一个计算机属性reversedMessage,我们提供的函数将用作属性vm.reversedMessage的getter。

③计算机缓存 vs Methods

可以通过调用表达式中的method来达到同样的效果:

<p>Reversed message:"{{reversedMessage}}"</p>
//in component 
methods:{ 
 reversedMessage:function(){ 
 return this.message.split('').reverse()/join('') 
 } 
}

可以将同一个函数定义为一个method而不是一个计算机属性。对于最终的结果,两种方式确实是相同的。然而不同的计算机属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值,这就意味着只要message还没有改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。
下面的计算属性将不再更新,因为Date.now()不是响应式依赖:

computed:{ 
 now:function(){ 
 return Date.now() 
 } 
}

只要发生重新渲染,method调用总会执行该函数。

④computed属性 vs watch属性

<div id= "demo">{{fullName}}</div>

watch:

var vm = new Vue({ 
 el:"#demo", 
 data:{ 
 firstName:"Foo", 
 lastName:"Bar", 
 fullName:"Foo Bar" 
 }, 
 watch:{ 
 firstName:function(val){ 
  this.fullName = val + '' + this.lastName 
 }, 
 lastName:function(val){ 
 this.fullName = this.firstName + '' +val 
 } 
 } 
})

computed:

var vm = new Vue({ 
 el:'#demo', 
 data:{ 
 firstName:'Foo', 
 lastName:'Bar' 
 }, 
 computed:{ 
 fullName:function(){ 
  return this.firstName + ' ' + this.lastName 
 } 
 } 
})

⑤计算setter:

计算属性默认只有getter,不过在需要是可以提供一个setter:

// ... 
computed: { 
 fullName: { 
 // getter 
 get: function () { 
  return this.firstName + ' ' + this.lastName 
 }, 
 // setter 
 set: function (newValue) { 
  var names = newValue.split(' ') 
  this.firstName = names[0] 
  this.lastName = names[names.length - 1] 
 } 
 } 
} 
// ...

在运行vm.fullName = 'John Doe'时,setter会被调用,vm.firstName和vm.lastName  也相应的会被更新。

⑥观察watchers

    当想要在数据变化相应时,执行异步操作或开销较大的操作,这是很有用的。

<div id="watch-example"> 
 <p> 
 Ask a yes/no question: 
 <input v-model="question"> 
 </p> 
 <p>{{ answer }}</p> 
</div>
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script> 
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script> 
<script> 
var watchExampleVM = new Vue({ 
 el: '#watch-example', 
 data: { 
 question: '', 
 answer: 'I cannot give you an answer until you ask a question!' 
 }, 
 watch: { 
 // 如果 question 发生改变,这个函数就会运行 
 question: function (newQuestion) { 
  this.answer = 'Waiting for you to stop typing...' 
  this.getAnswer() 
 } 
 }, 
 methods: { 
 // _.debounce 是一个通过 lodash 限制操作频率的函数。 
 // 在这个例子中,我们希望限制访问yesno.wtf/api的频率 
 // ajax请求直到用户输入完毕才会发出 
 // 学习更多关于 _.debounce function (and its cousin 
 // _.throttle), 参考: https://lodash.com/docs#debounce 
 getAnswer: _.debounce( 
  function () { 
  var vm = this 
  if (this.question.indexOf('?') === -1) { 
   vm.answer = 'Questions usually contain a question mark. ;-)' 
   return 
  } 
  vm.answer = 'Thinking...' 
  axios.get('https://yesno.wtf/api') 
   .then(function (response) { 
   vm.answer = _.capitalize(response.data.answer) 
   }) 
   .catch(function (error) { 
   vm.answer = 'Error! Could not reach the API. ' + error 
   }) 
  }, 
  // 这是我们为用户停止输入等待的毫秒数 
  500 
 ) 
 } 
}) 
</script>

 在这个示例中,使用watch选项允许我们执行异步操作,限制我们执行该操作的频率,并在得到最终结果前,设置中间状态,这是计算属性无法做到的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
Angular2实现自定义双向绑定属性
Mar 22 #Javascript
Bootstrap如何激活导航状态
Mar 22 #Javascript
Bootstrap超大屏幕的实现代码
Mar 22 #Javascript
Bootstrap缩略图的创建方法
Mar 22 #Javascript
JS+DIV实现的卷帘效果示例
Mar 22 #Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 #Javascript
javascript实现滑动解锁功能
Mar 22 #Javascript
You might like
php二分法在IP地址查询中的应用
2008/08/12 PHP
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
express框架下使用session的方法
2019/07/31 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
python实现超简单端口转发的方法
2015/03/13 Python
Python单链表简单实现代码
2016/04/27 Python
详解python3实现的web端json通信协议
2016/12/29 Python
python flask 多对多表查询功能
2017/06/25 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
送给他或她的礼物:FUN.com
2018/08/17 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
大学生实习思想汇报
2014/01/12 职场文书
目标责任书范本
2014/04/16 职场文书
员工生日活动方案
2014/08/24 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android