computed属性中的get与set

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了computed属性中的get与set相关的知识,希望对你有一定的参考价值。

参考技术A 1.computd是vue的一种属性,
2.里面有get和set方法

1.get方法是取,相当于我们可以在get中给这个计算属性中的变量赋值
2.set方法是改变时触发,这里的改变指的是当我们在computed中定义的变量的值发生改变是,会触发set方法,这样我们就可以在set方法中进行一些我们想要做的事,(比如说调用某个方法)

1.computend依赖的数据发生改变才触发回调
2.watch:监听的变量发生改变就会触发回调

vue computed 原理

vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想。

computed: {
  a(){
     return this.b ++
   }  
}
data:{
  b: 1  
}

vue中如果b变化,a也会变化。这儿为了简单,不在展示computed.a的set跟get

1、data中的数据需要使用es5中的 Object.defineProperty 设置set,get属性。

2、在运行computed.a()函数的时候,需要建立数据依赖,搜集。

    // 做一个构造函数A,作用是对data添加特性方法(set,get)
    class A {
      constructor(data, computed) {
        this.defineProperty(data, ‘a‘,data.a) // 对data中的属性‘a’添加特性方法
        this.collect =  computed.computA, // computed中的函数,记录下来
          
        computed.computA() // 运行此函数,会对data.a 进行取值,触发data.a的get函数,建立依赖
      }

      defineProperty(obj, key, val) { // 使用函数封装 添加特性方法
        const collect = [] 
        Object.defineProperty(obj, key, {
          get() {                    // 当取值 data.a 时会触发get函数
            if (this.collect) {
              collect.push(this.collect)  // 如果探测到有需要运行的compueted函数,搜集起来。
            }
            return val
          },
          set(value) {
            val = value
            collect.forEach(it => it())  // 如果data.a = 2 则运行set特性函数,此时,那些搜集起来的computed函数都运行
          }
        })
      }
    }



const computed
= { computA() { return data.a + 1 } } const data = { a: 1 } // 测试 new A(data, computed) computed.computA() // 2 data.a++ computed.computA() // 3

 

以上是关于computed属性中的get与set的主要内容,如果未能解决你的问题,请参考以下文章

computed属性中的get与set

vue中computed的 get与set属性

vue3中的 computed

vue 计算属性computed get 怎么把当前操作的dom传进去

Vue computed 实现原理

vue computed 原理