深入浅析Vue.js计算属性和侦听器


Posted in Javascript onMay 05, 2018

一、 概述

 计算属性

  模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

<div id="example">
 {{ message.split('').reverse().join('') }}
</div>

   在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。

  所以,对于任何复杂逻辑,你都应当使用计算属性。

 基础例子

<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: {
  // 计算属性的 getter
  reversedMessage: function () {
   // `this` 指向 vm 实例
   return this.message.split('').reverse().join('')
  }
 }
})

    结果:

深入浅析Vue.js计算属性和侦听器

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

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

      你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message,因此当 vm.message 发生改变时,所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系:计算属性的 getter 函数是没有副作用 (side effect) 的,这使它更易于测试和理解。

二、计算属性缓存 vs 方法

        你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
 reversedMessage: function () {
  return this.message.split('').reverse().join('')
 }
}

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

    这也同样意味着下面的计算属性将不再更新,因为 Date.now() 不是响应式依赖

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

      相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

我们为什么需要缓存?

      假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

三、计算属性 vs 侦听属性

       Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。

  细想一下这个例子

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

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
  }
 }
})

     上面代码是命令式且重复的。将它与计算属性的版本进行比较:

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 也会相应地被更新。

五、侦听器

      虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

    例如:

<div id="watch-example">
 <p>
  Ask a yes/no question:
  <input v-model="question">
 </p>
 <p>{{ answer }}</p>
</div>

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/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, oldQuestion) {
   this.answer = 'Waiting for you to stop typing...'
   this.getAnswer()
  }
 },
 methods: {
  // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
  // 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
  // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
  // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
  // 请参考:https://lodash.com/docs#debounce
  getAnswer: _.debounce(
   function () {
    if (this.question.indexOf('?') === -1) {
     this.answer = 'Questions usually contain a question mark. ;-)'
     return
    }
    this.answer = 'Thinking...'
    var vm = this
    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>

    结果:当没有输入?号,那么显示如下:

深入浅析Vue.js计算属性和侦听器

    当有?时候会输出“yes”或者“no”

 具体案例效果地址:侦听器

深入浅析Vue.js计算属性和侦听器

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

总结

以上所述是小编给大家介绍的Vue.js计算属性和侦听器,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
小程序实现多选框功能
Oct 30 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
vue实现评价星星功能
Jun 30 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 #Javascript
vue 注册组件的使用详解
May 05 #Javascript
Vue三层嵌套路由的示例代码
May 05 #Javascript
动态加载JavaScript文件的3种方式
May 05 #Javascript
Node.js的Koa实现JWT用户认证方法
May 05 #Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 #Javascript
Angular模版驱动表单的使用总结
May 05 #Javascript
You might like
一个MYSQL操作类
2006/11/16 PHP
服务器web工具 php环境下
2010/12/29 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
浅谈js原生拖放
2016/11/21 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python中join和split用法实例
2015/04/14 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
python学生信息管理系统(完整版)
2020/04/05 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
一套C++笔试题面试题
2012/06/06 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
党员演讲稿
2014/09/04 职场文书
统招统分证明
2015/06/23 职场文书
升学宴学生致辞
2015/09/29 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
800字作文之大雪
2019/12/04 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL