浅尝 Vue 中的 computed 属性 与 watch

对于 computed 的理解：

①.computed 用来监控自己定义的变量，该变量不在 data 里面声明，直接在 computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

②.computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是当多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。举个栗子：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择；

计算属性可用于快速计算视图（view）中显示的属性。这些计算将被缓存，只在需要时更新；

computed属性实现与方法实现对比：

1、通过computed属性实现累加效果：

2、通过普通方法实现累加效果：

综上可以看出这两种方式的输出结果是相同的，但从性能分析，computed 计算属性是占绝对优势的，原因分析如下：

①.使用 addMarks()  方法在每次页面渲染时都被执行一次（例如，使用每一个change）；

②.如果使用计算属性computed()，那么vue会记住计算的属性所依赖的值（在这个例子中即为 results 数组）。通过计算属性，Vue只有在依赖变化时才可以计算值。不然，则返回以前缓存的值。这也意味着只要results没有发生改变，多次访问 totalMark计算属性会立即返回之前的计算 的结果，而不会再次执行函数。

由此可知，在vue中计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能要好；

computed属性与watch对比：

watch实现：

computed计算属性实现：

通过对比，不难发现，通过 watch 实现的代码是命令式的和重复的；所以需要酌情使用；