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通过style或者class改变样式的实例代码，在文中给大家提到了vue的一些样式(class/style)绑定,需要的朋友可以参考下2018-10-10
Vue中ElementUI结合transform使用时弹框定位不准确问题解析
在近期开发中,需要将1920*1080放到更大像素大屏上演示,所以需要使用到transform来对页面进行缩放,但是此时发现弹框定位出错问题,无法准备定位到实际位置,本文给大家分享Vue中ElementUI结合transform使用时弹框定位不准确解决方法,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了Vuex中Store的简单实现,为了在 Vue 组件中访问 this.$store property,你需要为 Vue 实例提供创建好的 store,Vuex 提供了一个从根组件向所有子组件,以 store 选项的方式 注入 该 store 的机制,需要的朋友可以参考下2023-11-11
今天小编就为大家分享一篇vue之debounce属性被移除及处理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了Vue响应式原理，响应式就是当对象本身（对象的增删值）或者对象属性（重新赋值）发生了改变的时候，就会运行一些函数，最常见的示render函数2022-09-09
今天小编就为大家分享一篇关于在Vue项目中取消ESLint代码检测的步骤讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
vue3项目,新增弹框连续点击确定按钮防止多次提交,在按钮上添加自定义指令,这篇文章主要介绍了VUE3自定义指令防止重复点击多次提交的实现方法,需要的朋友可以参考下2024-08-08
这篇文章主要为大家介绍了Vue2 中的数据劫持简写示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
vue webpack build资源相对路径的问题及解决方法
这篇文章主要介绍了vue webpack build资源相对路径的问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了vue中使用localstorage来存储页面信息,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论