zoukankan      html  css  js  c++  java
  • Vue里的计算属性(computed)、方法(methods)和侦听属性(watch)的区别与使用场景

    1.Computed 和 Methods 的区别

    下面用Computed和Methods实现同一个功能:

    <!-- 计算属性示例 -->
    
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    
    <script>
    // ...
    
    computed: {
        reversedMessage: function () {
          return this.message.split('').reverse().join('');
    }
    </script>
    <!-- 方法示例 -->
    
    <p>Reversed message: "{{ reversedMessage() }}"</p>
    
    <script>
    // ...
    
    methods: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('');
      }
    }
    </script>
    

    具体分析如下:

    1. 可以像绑定普通属性一样在模板中绑定计算属性
    2. 计算属性基于自己的依赖进行缓存, 也就是说,计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着,上述案例中,只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
    3. 对应的, 每次出发重新渲染时,调用方法总会再次执行函数
    4. 假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

    2. Watch

    侦听属性是一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。

    当你有一些数据需要随着其它数据变动而变动时,或者当需要在数据变化时执行异步或开销较大的操作时,你可以使用 watch。

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

    <div id="watch-example">
      <p>
        Ask a yes/no question:
        <input v-model="question">
      </p>
      <p>{{ answer }}</p>
    </div>
    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 () {
        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
            })
        }
      }
    })
    

    3.总结

    1. 模板内使用了复杂逻辑的表达式时,应当使用计算属性。
    2. 虽然方法也能实现同样的效果,但是因为计算属性可以基于它们的依赖进行缓存,所以选择计算属性会比方法更优。
    3. 当需要在数据变化时执行异步或开销较大的操作时,可以使用 watch。
  • 相关阅读:
    [kuangbin带你飞]专题十六 KMP & 扩展KMP & ManacherK
    [kuangbin带你飞]专题十六 KMP & 扩展KMP & Manacher J
    [kuangbin带你飞]专题十六 KMP & 扩展KMP & Manacher I
    pat 1065 A+B and C (64bit)(20 分)(大数, Java)
    pat 1069 The Black Hole of Numbers(20 分)
    pat 1077 Kuchiguse(20 分) (字典树)
    pat 1084 Broken Keyboard(20 分)
    pat 1092 To Buy or Not to Buy(20 分)
    pat 1046 Shortest Distance(20 分) (线段树)
    pat 1042 Shuffling Machine(20 分)
  • 原文地址:https://www.cnblogs.com/Nullc/p/13209887.html
Copyright © 2011-2022 走看看