methods +computed +watch

使用复杂的js表达式计算属性结果

使用vue的基本结构，只有的表达式较为简单，并且使用较少时才会使用。

当表达式较为复杂，或者大量频繁的使用这种方式进行属性值的运算是不可取的。界面结构复杂不便于维护。

 

使用带有返回值的方法完成以上需求

使用methods中的带返回值的方法，这种方式，整个页面会变得很整洁。并且代码的性能也提高了！！ 但是这种方法，进行属性计算的方式，还是有些问题。

当有vue数据改变的时候，整个页面数据会重新更新。这时候不管此处的数据有没有改变，此方法都会执行一次。

 

专门进行属性运算的vue属性 computed

这种为了获取属性计算值的方法，可以写在专门的vue属性computed中。

computed在使用方法上与写在methods中的唯一差别------ 这种用法与methods有根本的差别 可以监听所依赖的属性变化，依赖属性发生变化就会执行。 有缓存机制。---性能优化

computed属性的设计是为了，监听依赖项数据变化，然后进行属性值的运算，最终将数据变化绑定到页面上。   return 是关键

 

watch

vue提供了一个专门的属性watch，来监听单个数据的变化，当数据变化就会执行相应的函数。

使用button上的点击事件，更新num值。

watch会监听num的变化，一旦num发生变化，就会执行相应的操作。 所以我们可以理解，watch中的函数不用我们去调用。当满足条件会自己执行。