取消网站备案,网站树状型结构优化,wordpress拖拽布局,工作纪律心得体会文章目录 前言计算属性的由来方法实现 计算属性 同样的效果计算属性缓存 vs 方法 前言
在官方文档中#xff0c;给出了计算属性的说明与用途#xff0c;也讲述了计算属性与方法的区别点。本篇博客只做自己的探究记录#xff0c;以官方文档为准。
vue 计算属性 官方文档
… 文章目录 前言计算属性的由来方法实现 计算属性 同样的效果计算属性缓存 vs 方法 前言
在官方文档中给出了计算属性的说明与用途也讲述了计算属性与方法的区别点。本篇博客只做自己的探究记录以官方文档为准。
vue 计算属性 官方文档
计算属性的由来
正常来说使用模板语法也能实现一些判断操作并将判断后的数据值进行展示。如下
templateh1计算属性与方法实现探究/h1pHas published books:/pspan{{ author.books.length 0 ? Yes : No }}/span
/template
script
export default {data(){return{author: {name: John Doe,books: [Vue 2 - Advanced Guide,Vue 3 - Basic Guide,Vue 4 - The Mystery]}}}
}
/script效果展示如下所示 但正常开发来说在模板语法中只会用来做基本的数据展示数据的处理需要使用放入计算属性 computed中进行实现。 如下所示
templateh1计算属性与方法实现探究/h1pHas published books:/pspan{{ author.books.length 0 ? Yes : No }}/spanhrspan计算属性{{ checkBooks }}/span br
/template
script
export default {data(){return{author: {name: John Doe,books: [Vue 2 - Advanced Guide,Vue 3 - Basic Guide,Vue 4 - The Mystery]}}},computed:{checkBooks(){console.log(计算属性);return this.author.books.length 0 ? Yes : No;}}
}
/script由于计算属性属于属性所以在标签中采取{{ }}包含时不能带有()。
方法实现 计算属性 同样的效果
由于methods中用来存放函数、方法所以在计算属性computed中的方法依旧可以用methods实现。如下所示
templateh1计算属性与方法实现探究/h1pHas published books:/pspan{{ author.books.length 0 ? Yes : No }}/spanhrspan计算属性{{ checkBooks }}/span brhrspan方法实现{{ checkBooks1() }}/span br
/template
script
export default {data(){return{author: {name: John Doe,books: [Vue 2 - Advanced Guide,Vue 3 - Basic Guide,Vue 4 - The Mystery]}}},computed:{checkBooks(){console.log(计算属性);return this.author.books.length 0 ? Yes : No;}},// methods 中存放函数methods:{checkBooks1(){console.log(*****方法实现*****);return this.author.books.length 0 ? Yes : No;}}
}
/script由于是采取methods进行数据的计算所以数据的展示需要使用()标识调用方法。
【注意】计算属性与方法名称不能相同否则会出现报错
计算属性缓存 vs 方法
虽然在methods中编写一个方法调用与计算属性中抛出一个计算结果值能达到一样的效果。 但两者本身有很大的区别。不同之处在于计算属性值会基于其响应式依赖被缓存。
这句话如何理解呢看下面的案例
templateh1计算属性与方法实现探究/h1pHas published books:/pspan{{ author.books.length 0 ? Yes : No }}/spanhrspan计算属性{{ checkBooks }}/span brspan计算属性{{ checkBooks }}/span brspan计算属性{{ checkBooks }}/span brspan计算属性{{ checkBooks }}/span brhrspan方法实现{{ checkBooks1() }}/span brspan方法实现{{ checkBooks1() }}/span brspan方法实现{{ checkBooks1() }}/span brspan方法实现{{ checkBooks1() }}/span br
/template
script
export default {data(){return{author: {name: John Doe,books: [Vue 2 - Advanced Guide,Vue 3 - Basic Guide,Vue 4 - The Mystery]}}},computed:{checkBooks(){console.log(计算属性);return this.author.books.length 0 ? Yes : No;}},// methods 中存放函数methods:{checkBooks1(){console.log(*****方法实现*****);return this.author.books.length 0 ? Yes : No;}}
}
/script查看浏览器控制台中的打印信息 【发现】 当初始数组中的数据并未变化的时候如果采取计算属性在第一次做调用处理并将第一次计算的结果值做缓存后面多次重复调用直接读取的是缓存中的数据值而不是重复计算。
但方法中每次的调用都会重新执行一次计算逻辑。
相比之下方法调用总是会在重渲染发生时再次执行函数。
