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/计算属性在创建时是不会去求值的，是在使用的时候去求值的。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。