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使用exif获取图片经纬度的示例代码，帮助大家更好的利用vue获取图片信息，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了vue高级组件之provide与inject使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vuex是专门为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于vuex中5个属性使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
element-ui form表单的动态rules校验功能实现
在vue项目中，有时候可能会用到element-ui form表单的动态rules校验，这篇文章主要介绍了element-ui form表单的动态rules校验,我们可以巧妙的运用element-ui form表单里面form-item的校验规则来处理，本文结合实例代码介绍的非常详细，需要的朋友可以参考下2023-07-07
无论是小型项目还是中大型项目，Vue-Router都是必选的一个组件，Vue-Router提供了便捷的方式进行路由跳转，在使用过程中有一些坑，希望能给在编码找不到问题时的码农提供一点灵感2022-06-06
element-ui table行点击获取行索引（index）并利用索引更换行顺序
这篇文章主要介绍了element-ui table行点击获取行索引（index）并利用索引更换行顺序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了基于el-tree实现懒加载穿梭条的示例代码,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要为大家详细介绍了Vue的列表之渲染,排序,过滤，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
Vue+Openlayer使用modify修改要素的完整代码
这篇文章主要介绍了Vue+Openlayer使用modify修改要素的完整代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-09-09
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
这篇文章主要介绍了vue-quill-editor 自定义工具栏和自定义图片上传路径操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论