Vue:学习笔记(四)-计算属性和侦听器

栏目: JavaScript · 发布时间: 6年前

内容简介:Vue:学习笔记(四)-计算属性和侦听器。原帖完整收藏于IT老兵驿站,并会不断更新。参考官网的

Vue:学习笔记(四)-计算属性和侦听器。

提醒

原帖完整收藏于IT老兵驿站,并会不断更新。

前言

参考官网的 这里中文版 ,总体学习一下计算属性,感觉这一章节总体是比较简单的,做一下笔记来进行总结。思路是,原文写的很清楚的,只做简单的概括;对原文存在疑问的地方,摘抄原文,列举问题,总结概括。

正文

计算属性

摘录原则:

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

基础例子

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

这里的reversedMessage实际上是和message绑定在一起了,message发生变化,则

reversedMessage也发生变化。

那这里,存在一个疑问了,计算属性是不是也可以不和基本属性(例如message)发生绑定关系呢?

计算属性缓存 vs 方法

这一段刚好解决了上面提出的这个问题,看来不断地提一提问题,对于理解是很有帮助的,“学而不思则罔”。

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

这段话很好地解释了什么时候要使用计算属性,为了提高效率,很合理地去利用架构提供的缓存的功能。

计算属性 vs 侦听属性

当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。

去年学习AngularJS,使用watch函数进行监控,后来在网站上看到很多对于这个watch方式的诟病,说这样会发生抖动,会导致DOM树不断被渲染,这个还需要再深度研究一下。

计算属性的 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]
    }
  }
}
// ...

侦听器

<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.debouncedGetAnswer()
    }
  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
    // 请参考:https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: 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
        })
    }
  }
})
</script>

对于这个例子,我是这么理解的,要监控中间的变化(例如一段文字输入的中间过程),这个时候使用侦听器就是合理的。

这里还涉及了一个知识点

_.debounce(func, [wait=0], [options={}])

Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.

这个方法是对函数进行延时调用,避免函数被调用过于频繁,在上面的例子中,就是避免因为用户输入很快,而反复被调用,所以中间等待500毫秒。


以上所述就是小编给大家介绍的《Vue:学习笔记(四)-计算属性和侦听器》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Joy of X

The Joy of X

Niall Mansfield / UIT Cambridge Ltd. / 2010-7-1 / USD 14.95

Aimed at those new to the system seeking an overall understanding first, and written in a clear, uncomplicated style, this reprint of the much-cited 1993 classic describes the standard windowing syste......一起来看看 《The Joy of X》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

SHA 加密
SHA 加密

SHA 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具