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 操作符整理[推荐收藏]
Nov 15 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
js实现日历的简单算法
Jan 24 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 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
动易数据转成dedecms的php程序
2007/04/07 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
Jquery ui css framework
2010/06/28 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
javascript中new关键字详解
2015/12/14 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
node使用request请求的方法
2019/12/20 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
python 用下标截取字符串的实例
2018/12/25 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
四年级科学教学反思
2014/02/10 职场文书
反邪教警示教育方案
2014/05/13 职场文书
学习型党组织心得体会
2014/09/12 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
女儿满月酒致辞
2015/07/29 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
服务器SVN搭建图文安装过程
2022/06/21 Servers