Vue中的计算属性computed传参方式
更新时间：2023年11月16日 10:13:44 作者：lenjstlp
这篇文章主要介绍了Vue中的计算属性computed传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue计算属性computed传参
计算属性在依赖值不变的情况下，结果是会缓存数据的；
methods中定义的方法调用则不会缓存。
所以计算属性相对函数来说性能更好一些。
计算属性的传参方式
1. 如果使用类似函数的调用传参方式，会报如下错误：
如下是错误操作：
data() {
return {
data: [{id: 1},{id: 2}]
}
}
computed: {
testComputed(val) {
return this.data[val]
}
}
created() {
this.testComputed(0)
}2. 正确使用方式(写成闭包的形式)：
data() {
return {
data: [{id: 1},{id: 2}]
}
}
computed: {
testComputed() {
return val => {
return this.data[val]
}
},
}
created() {
console.log(this.testComputed(0)) // { "id": 1 }
}vue computed原理
computed 本质是一个惰性求值的观察者。
computed 内部实现了一个惰性的 watcher,也就是 computed watcher 不会立刻求值,它同时持有一个 dep 实例。
其内部通过 this.dirty 属性标记计算属性是否需要重新求值。
当 computed 的依赖状态发生改变时,就会通知这个惰性的 watcher,
computed watcher 通过 this.dep.subs.length 判断有没有订阅者, 并设置 this.dirty = true
- 有的话,会重新计算,然后对比新旧值,如果变化了,会重新渲染。 (Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化时才会触发渲染 watcher 重新渲染，本质上是一种优化。)
- 没有的话,仅仅把 this.dirty = true。 (当计算属性依赖于其他数据时，属性并不会立即重新计算，只有之后 其他地方需要读取属性 的时候，它才会真正计算，即具备 lazy（懒计算）特性。比如这个属性并没有被其他地方用到，就不会重新去计算它)
- 所以惰性watcher/计算属性在创建时是不会去求值的，是在使用的时候去求值的。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于如何优雅地在vue中添加权限控制的相关资料，文中通过示例代码以及图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章主要介绍了Vue3中的组件数据懒加载问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了在vue中如何封装G2图表，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
下面小编就为大家分享一篇集成vue到jquery/bootstrap项目的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue中$router与 $route的区别详解，文章围绕主题展开详细的内容戒杀，具有一定的参考价值，需要的朋友可以参考一下2022-09-09
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
这篇文章主要介绍了详解vue-cli 3.0 build包太大导致首屏过长的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了vue2.0之监听属性的使用心得及搭配计算属性的使用,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
GMT（Greenwich Mean Time）和UTC（Coordinated Universal Time）是两个时间标准,它们在许多方面非常相似,但也有一些微小的差异,本文给大家详细介绍了Vue使用moment将GMT时间转换为北京时间,需要的朋友可以参考下2023-12-12
Electron主进程(Main Process)与渲染进程(Renderer Process)通信详解
这篇文章主要介绍了Electron主进程(Main Process)与渲染进程(Renderer Process)通信,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
今天小编就为大家分享一篇Vue-router 切换组件页面时进入进出动画方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论