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的主要内容,如果未能解决你的问题,请参考以下文章