vue中method，computed，watch有什么区别

Question

vue中method，computed，watch有什么区别

Answer 1

通俗来讲，
computed是在HTML DOM加载后马上执行的，如赋值；
而methods则必须要有一定的触发条件才能执行，如点击事件；
watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。
所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。
下面的例子可以做为说明。
computed 属性 vs watched 属性：Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。

Answer 2

1、methods是个方法，比如你点击事件要执行一个方法，这时候就用methods,

2、computed是计算属性，实时响应的，比如你要根据data里一个值随时变化做出一些处理，就用computed。

3、举一个例子帮助理解：

1）<div id="root">；

2） </div>；

3） <script>        var vm = new Vue({            el: '#root',            data:data,            methods:{

4）method_now(){                    return Date.now();} },            

5）computed:{                

6）computed_now: function () {                    return Date.now();}} })

7）</script>

4、控制台访问：

1）$vm0.computed_now；

2）1491741921719$vm0.computed_now；

3）1491741921719$vm0.computed_now；

4）1491741921719$vm0.computed_now；

5）1491741921719$vm0.method_now；

6）()1491741949941$vm0.method_now；

7）()1491741950734$vm0.method_now；

8）()1491741951445$vm0.method_now；

9）()1491741952117。

5、methods是方法和原生js没区别，大多是需要我们主动调用（比如事件）。

6、computed是get 这个get有点特殊，只要触发所依赖数据的set会自动触发get。我们只关心get的return set由系统触发或者依赖的数据触发，官方说依赖缓存只是为了理解。其实Date.now()这种只是系统不能触发set，不能触发set get当然不会通知观察者。

7、watch 是set 由data触发，我们可以在set里进行自己的条件封装。