Vue学习笔记----computed计算属性、侦听器

最新推荐文章于 2022-07-05 19:43:50 发布

Model_Vincent

最新推荐文章于 2022-07-05 19:43:50 发布

阅读量262

点赞数

分类专栏： Vue 文章标签： vue computed

本文链接：https://blog.csdn.net/Model_Vincent/article/details/84099892

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

computed计算属性

前言 ：  
计算属性主要用于模板数据的处理
{{message.split('').reverse().join('')}}
这种写法难懂且复杂，采用计算属性更容易维护页面

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

computed计算属性、methods方法 – 比较

实际在methods方法中我们也可以达到同样的效果

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

引入缓存概念

computed计算属性 有依赖概念，计算肯定会有相关的data和他关联，当依赖的data未发生变
化时，computed的引用就是从缓存中取。

methods方法 实际是方法的调用，在模板中引用一次，实际就是调用方法执行一次

== 注意 ==
既然computed计算属性是依赖data的改变而变化，那么直接return date.now()将永远是一个值

computed计算属性的setter

默认getter

computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

自定义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]
    }
  }

侦听器

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