Vue的methods & computed

methods中定义的是普通方法(没啥特殊性),如果在视图中调用这个方法执行,不仅第一次渲染的时候方法会执行，而且后续因为某些状态的改变,导致视图重新渲染的时候,这个方法还会重新执行【不论更改的状态和方法是否有关系】

--> 这样明显是不好的,所以我们期望于有一种办法,能让:第一次渲染的时候方法执行一次(算出一个结果，可以把这个结果缓存起来),后续无论视图重新渲染多少次，只有方法依赖的状态发生改变,函数才会再执行;只要依赖的状态不变,视图中一直使用之前缓存的下来的结果,函数不会执行！！

--> 这个解决方案就是:“计算属性” computed【特点：能够缓存上一次/第一次计算的结果,只要依赖的状态不改变，则方法不会重新执行/也不会重新计算,用的都是上一次缓存的值！只有依赖状态改变,才会重新执行方法！】

• computed中编写的内容,也会进行get/set劫持,也会挂载到实例上，所以不能和data/methods中的名字冲突
• 虽然写的是个函数，但是它本质上不是函数，所以视图中使用的时候，应该当做状态使用，而不是函数执行

{{time2}} 

• 第一次渲染计算属性,会把编写的函数执行(this -> vm)，把方法返回的结果做为当前状态的值
• 并且建立相关依赖:在函数中用到的其他状态，都会成为此计算属性的依赖项
• 当视图重新渲染的时候，会判断依赖项的值有没有变化
  • 没有变化:函数不会重新执行,会直接使用上一次计算的结果进行渲染
  • 有变化: 把函数重新执行，重新计算新的计算属性值,并且缓存起来

面试题：methods和computed的区别？

methods VS computed

• 相同：都是直接挂载到实例上的;虽然计算属性不是函数,但是和methods相同,它的值都是经过编写的函数执行,所计算出来的结果【第一次渲染必然要执行一次】!
• 不同: methods就是普通方法,如果视图中出现函数执行,则不论是第一次渲染还是后期视图更新,方法都会被执行;而computed具备“缓存效果”，除第一次渲染必然执行外,后续视图更新,只有依赖的状态发生改变,方法才会再次执行;
• ---> 真实项目中,但凡需要根据其它状态值,重新计算一个新的状态值出来的时候,都可以使用计算属性,它的性能好！

computed 计算属性原理：监听依赖项有没有变，写成一个函数，但它本身是个状态；监听它的时候，第一次会把函数执行一次，算出个值，缓存起来，后期一直监听它的依赖项有没有变化，如果依赖项变了，它就会重新执行方法，重新计算新的值，依赖项没变，就拿上次的值直接用