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> &nbsp; &nbsp; &nbsp; &nbsp;var vm = new Vue({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;el: '#root', &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data:data, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;methods:{4）method_now(){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return Date.now();} }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;5）computed:{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;6）computed_now: function () { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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里进行自己的条件封装。