methods中定义的是普通方法(没啥特殊性),如果在视图中调用这个方法执行,不仅第一次渲染的时候方法会执行,而且后续因为某些状态的改变,导致视图重新渲染的时候,这个方法还会重新执行【不论更改的状态和方法是否有关系】
--> 这样明显是不好的,所以我们期望于有一种办法,能让:第一次渲染的时候方法执行一次(算出一个结果,可以把这个结果缓存起来),后续无论视图重新渲染多少次,只有方法依赖的状态发生改变,函数才会再执行;只要依赖的状态不变,视图中一直使用之前缓存的下来的结果,函数不会执行!!
--> 这个解决方案就是:“计算属性” computed【特点:能够缓存上一次/第一次计算的结果,只要依赖的状态不改变,则方法不会重新执行/也不会重新计算,用的都是上一次缓存的值!只有依赖状态改变,才会重新执行方法!】
- computed中编写的内容,也会进行get/set劫持,也会挂载到实例上,所以不能和data/methods中的名字冲突
- 虽然写的是个函数,但是它本质上不是函数,所以视图中使用的时候,应该当做状态使用,而不是函数执行
{{time2}}
- 第一次渲染计算属性,会把编写的函数执行(this -> vm),把方法返回的结果做为当前状态的值
- 并且建立相关依赖:在函数中用到的其他状态,都会成为此计算属性的依赖项
- 当视图重新渲染的时候,会判断依赖项的值有没有变化
- 没有变化:函数不会重新执行,会直接使用上一次计算的结果进行渲染
- 有变化: 把函数重新执行,重新计算新的计算属性值,并且缓存起来
面试题:methods和computed的区别?
methods VS computed
- 相同:都是直接挂载到实例上的;虽然计算属性不是函数,但是和methods相同,它的值都是经过编写的函数执行,所计算出来的结果【第一次渲染必然要执行一次】!
- 不同: methods就是普通方法,如果视图中出现函数执行,则不论是第一次渲染还是后期视图更新,方法都会被执行;而computed具备“缓存效果”,除第一次渲染必然执行外,后续视图更新,只有依赖的状态发生改变,方法才会再次执行;
- ---> 真实项目中,但凡需要根据其它状态值,重新计算一个新的状态值出来的时候,都可以使用计算属性,它的性能好!
computed 计算属性原理:监听依赖项有没有变,写成一个函数,但它本身是个状态;监听它的时候,第一次会把函数执行一次,算出个值,缓存起来,后期一直监听它的依赖项有没有变化,如果依赖项变了,它就会重新执行方法,重新计算新的值,依赖项没变,就拿上次的值直接用