一、定义
在模板中,对于任何复杂逻辑,应当使用计算属性
【Demo实例地址 https://jsbin.com/zehemop/2/edit?html,output 】
二、用法
1、所有计算属性都以函数形式写在 Vue 实例内的 computed 选项内,返回计算后的结果
2、可以依赖多个Vue实例数据,只要其中任一个数据变化,计算属性会重新执行,视图也更新
【Demo实例地址 https://jsbin.com/hajucur/edit?html,console,output 】
三、setter|getter
计算属性默认只有 getter ,不过在需要时可以提供一个 setter
当手动修改计算属性的值就像修改一个普通数据那样时,就会触发 setter函数,执行一些自定义的操作
【Demo实例地址 https://jsbin.com/qoduboh/1/edit?html,output 】
四、计算属性缓存
调用 methods 里的方法与计算属性起到同样的作用
页面中的方法: 如果是调用方法,只要页面重新渲染。方法就会重新执行,不需要渲染,则不需要重新执行 计算属性:不管是否渲染,只要计算属性依赖的数据未发生变化,就永远不变
当遍历大数组和做大量计算时,应当使用计算属性,除非你不希望得到缓存