vue中methods、watch、computed之间的差异对比以及适用场景

首先要说，methods,watch和computed都是以函数为基础的，但各自却都不一样； 

1、computer

当页面中有某些数据依赖其余数据进行变更的时候，能够使用计算属性。

<p id="app">  {{fullName}}  </p>

<script>
    var vm = new Vue({  
        el: '#app',  
        data: {  
            firstName: 'Foo',  
            lastName: 'Bar',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    })
</script>

须要注意的是，就算在data中没有直接声明出要计算的变量，也能够直接在computed中写入。

计算属性默认只有getter，能够在须要的时候本身设定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]
            }
        }
    }

这个时候在控制台直接运行vm.fullName = ‘bibi wang’，相应的firstName和lastName也会改变。

适用场景：

2、watch

watch和computed很类似，watch用于观察和监听页面上的vue实例，固然在大部分状况下咱们都会使用computed，但若是要在数据变化的同时进行异步操做或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是须要观察的表达式，值是对应回调函数。值也能够是方法名，或者包含选项的对象。直接引用文档例子

var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })

若是在data中没有相应的属性的话，是不能watch的，这点和computed不同。

适用场景：

3、methods

方法，跟前面的都不同，咱们一般在这里面写入方法，只要调用就会从新执行一次，相应的有一些触发条件，在某些时候methods和computed看不出来具体的差异，可是一旦在运算量比较复杂的页面中，就会体现出不同。

须要注意的是，computed是具备缓存的，这就意味着只要计算属性的依赖没有进行相应的数据更新，那么computed会直接从缓存中获取值，屡次访问都会返回以前的计算结果。

总结：

在computed和watch方面，一个是计算，一个是观察，在语义上是有区别的。

计算是经过变量计算来得出数据。而观察是观察一个特定的值，根据被观察者的变更进行相应的变化，在特定的场景下不能相互混用，因此仍是须要注意api运用的合理性和语义性。