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是非常有用的。

巴特西

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

最新文章

热门文章