持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情juejin.cn/post/714765…
今天刚刚学了监听属性、计算属性、方法属性，给大家分享一下，学的不是很透彻，哪里有错误。大家可以点评点评哦！！！
侦听属性watch
- 一些数据随着其他数据的变动而变动，就可以使用它。当然用其他方法也会实现。但是如果需要有大量计算的话，就是用watch比较方便。只有监听的值变化了，才会执行对应的侦听函数。
- watch在vue里可以监听路由组件传值的变化。
- 不要用箭头函数来定义侦听函数，因为它里面可能会访问到this。
- 缺点：只能侦听指定的值，而且watch只能监听一个值的变化。
计算属性
- methods可以监听多个值。
- 计算属性值的是computed。
- 计算属性会根据计算出来的新的值更新DOM。
针对watch、computed和methods的区别我进行了一个小总结：
监听属性：watch
- Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动。
- 如果一些数据依随着某一个数据变动而变动，那么推荐使用该方法。例如：员工工资，底薪5000，每出勤一天，加100元。
- 侦听某一个data中值得变化，只要侦听值的改变，就会调用侦听函数。
- 该函数中可以修改data中的其他值。但是不能复用，只能侦听一个值，这一个值发生变化，该函数就会再次执行。
- 支持异步监听
- 监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值
- 监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，函数有两个的参数：
- immediate：组件加载立即触发回调函数
- deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，不加deep无法监听到数组和对象内部的变化。它的值为bool值。
- 深度监听：加一个deep属性，要不然就对象名.属性名这样写下去。
计算属性：computed
vue.js 的内联表达式非常方便，但它最合适的使用场最是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑。在模板中放入太多的逻辑会让模板过重且难以维护。使用侦听属性，只能针对指定的数据，无法重用，所以，对于任何复杂逻辑，你都应当使用计算属性。
计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。 这个功能非常强大．它可以让你的代码更加声明式、数据驱动并且易于维护。
- 不支持异步，当Computed中有异步操作时，无法监听数据的变化
- 计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。
- 可以侦听多个值，只要函数中依赖的值发生改变，就会重新调用该计算属性，生成新的值。必须要有返回值不可以修改data中的数据。它需要在虚拟DOM中手动调用，但不用加（）。
- 必须要有返回值，它就是一个缓存值的函数。
方法属性：methods
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它才会重新求值 这就意味着只要依赖还没有发生改变，多次访问 reversedMessage 计算属性会立刻返回之前的计算结果，而不必再执行函数。
同样的逻辑代码，直接把computed改成methods，在调用里面的函数时，得加上（），即方法名（），它里面可以直接使用data数据。 我们可以将同一函数定义为一个方法而不是一个计算属性。 methods里面的函数肯定是每次都会执行的。
computed与methods最主要的区别：
computed会基于它们的依赖（函数的实参或监听的值）属性进行缓存，缓存到内存中。 我们使用methods代替computed，效果上两个都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用methdods，在重新渲染的时候，函数总会重新调用执行。可以说使用computed性能会更好，但是如果你不希望缓存，就是用methods属性。
我们为什么需要缓存？
假设我们有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并作大量的计算。然后我们可能有其他的计算属性依赖于A，如果没有缓存，我们终将不可避免地多次执行A的函数！如果你不希望有缓存，可以用methods方法代替。
自己写的一个小例子：
function jisuan(x){
for(var i=0; i<=x; i++){
.....hanshu
}
}
function test(num1){
num1+jisuan(999999999);
}
我个人对上面代码解释：如果把上面的两个函数都放在methods里进行计算的话，每次调用test函数，它里面的jisuan（）函数都会调用，会再次循环，而如果放在computed里进行，那么会根据jisuan（）里面的参数有没有变化，没有变化，会把上次缓存计算的结果拿出来直接使用，这也是computed最大的优势。
