计算属性缓存 vs 方法vswatch侦听属性

水深无声 2022-11-02 11:41 155阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  计算属性缓存 vs 方法
 *  计算属性 vs 侦听属性
 *  不同点
 *  总结

--------------------

# 计算属性缓存 vs 方法 #

<p>Reversed message: "{ { reversedMessage() }}"</p>
    
    // 在组件中
    methods: { 
      reversedMessage: function () { 
        return this.message.split('').reverse().join('')
      }
    }
    computed: { 
        // 计算属性的 getter
        reversedMessage: function () { 
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      }

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

# 计算属性 vs 侦听属性 #

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]

# 不同点 #

**计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务**。如果遇到异步任务，就交给侦听属性。watch也可以检测computed属性。

# 总结 #

计算属性适合用在模板渲染中，某个值是依赖了其它的响应式对象甚至是计算属性计算而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。

computed能做的，watch都能做，反之则不行  
能用computed的尽量用computed

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221024/49b6032796cb4c9785bff1b528f29877.png