Vue中computed、methods、watch的联系和区别

computed是计算树形,methods是方法。

new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
     return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage: function () {
     return this.message.split('').reverse().join('')
    }
  }
})

两种方法执行的结果是一样的,不同的是computed计算属性是基于他们的依赖进行缓存的,computed只有在它的相关依赖发生改变时才会重新求职。这就意味着只要message还没有发生改变,多次访问reversedMessage,计算属性就会立即返回之前的计算结果,而不会再次执行函数。method只要发生重新渲染,methods调用总会执行该函数。

总之:数据量大,需要缓存的时候用computed;每次确实需要重新加载,不需要缓存时用methods。

 

computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时,我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性,而不是命令是的watch回调。 

总之:尽量用computed计算属性来监视数据的变化,因为它本身就这个特性,用watch没有computed“自动”,手动设置使代码变复杂。

虽然计算属性在大多数情况下是非常适合的,但是在有些情况下我们需要自定义一个watcher,在数据变化时来执行异步操作,这时watch是非常有用的。

posted @ 2019-03-04 09:16 shirliey 阅读(...) 评论(...) 编辑 收藏