首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >从头创建您自己的vue.js——第4部分(构建反应性)

从头创建您自己的vue.js——第4部分(构建反应性)

作者头像
公众号---人生代码
发布2020-09-23 14:43:12
7360
发布2020-09-23 14:43:12
举报
文章被收录于专栏:人生代码人生代码

什么是状态反应?

状态反应是当应用程序(一组变量)的状态发生变化时,我们做某事(反应)。我们分两步来完成:

  1. 创建一个“反应依赖项”(当变量发生变化时,我们会得到通知)
  2. 创建“反应状态”(基本上是依赖变量的集合

函数监视更改

要做到这一点,我们首先需要一个在反应性依赖项发生变化时执行的函数。在Vue中,这被称为watchEffect;我们也会调用这个函数。

在我们的例子中,这个函数是这样的:

function watchEffect(fn) {
    activeEffect = fn
    fn()
    activeEffect = null
}

全局变量activeEffect是我们存储函数的临时变量,它被传递给watchEffect。这是必要的,因此我们可以在函数本身读取引用该函数的依赖项时访问该函数。

依赖类

我们可以将反应性依赖看作是一个变量,当它的值发生变化时通知它的订阅者。

它可以用一个初始值创建,因此我们需要一个构造函数

我们需要订阅一个函数来应对依赖项上的更改。我们将其称为depend()

当值改变时,我们需要一个通知订阅函数的依赖关系。我们将调用这个notify()

当值被读写时,我们需要做一些事情,所以我们需要一个getter和一个setter

所以我们的骨架是这样的:

class Dep {
    // Initialize the value of the reactive dependency
    constructor(value) {}

    // Subscribe a new function as observer to the dependency
    depend() {}

    // Notify subscribers of a value change
    notify() {}

    // Getter of the dependency. Executed when a part of the software reads the value of it.
    get value() {}

    // Setter of the dependency. Executed when the value changes
    set value(newValue) {}
}class Dep {
    // Initialize the value of the reactive dependency
    constructor(value) {}

    // Subscribe a new function as observer to the dependency
    depend() {}

    // Notify subscribers of a value change
    notify() {}

    // Getter of the dependency. Executed when a part of the software reads the value of it.
    get value() {}

    // Setter of the dependency. Executed when the value changes
    set value(newValue) {}
}

类有两个字段:value(依赖项的值)和subscribers(订阅函数集)。

我们一步一步地实现这个。

构造

constructor(value) {
    this._value = value // not `value` because we add getter/setter named value
    this.subscribers = new Set()
}

订阅者需要是一个集合,因此我们不会重复订阅相同的函数。

订阅一个函数

这里,我们需要订阅一个新函数作为依赖项的观察者。我们称之为依赖。

depend() {
    if (activeEffect) this.subscribers.add(activeEffect)
}

activeEffect是在watchEffect中设置的一个临时变量,本教程稍后将对此进行解释。

将依赖项更改通知订阅方

当值发生变化时,我们调用这个函数,以便在依赖项值发生变化时通知所有订阅者。

notify() {
    this.subscribers.forEach((subscriber) => subscriber())
}

我们这里所做的是执行每个订阅者。记住:这是一个订户是一个函数。

Getter

在依赖项的getter中,我们需要将activeEffect(当依赖项发生更改时将执行的函数)添加到订阅器列表中。换句话说,使用我们前面定义的depend()方法。

因此,我们返回当前值。

get value() {
    this.depend()
    return this._value
}

Setter

在依赖项的setter中,我们需要执行监视此依赖项的所有函数(订阅者)。换句话说,使用前面定义的notify()方法。

set value(newValue) {
    this._value = newValue
    this.notify()
}

试试

依赖项的实现已经完成。现在是时候试一试了。要做到这一点,我们需要做三件事:

定义一个依赖

添加要在依赖项更改时执行的函数

更改依赖项的值

// Create a reactive dependency with the value of 1
const count = new Dep(1)

// Add a "watcher". This logs every change of the dependency to the console.
watchEffect(() => {
    console.log('? value changed', count.value)
})

// Change value
setTimeout(() => {
    count.value++
}, 1000)
setTimeout(() => {
    count.value++
}, 2000)
setTimeout(() => {
    count.value++
}, 3000)

在控制台日志中,你应该可以看到这样的东西:

? value changed 1
? value changed 2
? value changed 3
? value changed 4

你可以找到完整的代码依赖?Github。

2. 构建反应状态

这只是谜团的第一部分,也是更好地理解接下来会发生什么的主要必要条件。

总结一下:我们有一个反应性依赖项和一个监视函数,它们让我们能够在变量(依赖项)发生变化时执行一个函数。这已经很酷了。但我们想更进一步,创建一个状态。

而不是像这样:

const count = Dep(1)
const name = Dep('Marc')
id.value = 2
name.value = 'Johnny'

我们想这样做:

const state = reactive({
    count: 1,
    name: 'Marc',
})
state.count = 2
state.name = 'Johnny'

为了实现这一点,我们需要对我们的代码做一些改变:

添加反应函数。这样就创建了“state”对象。

将getter和setter移到状态,而不是依赖项(因为这是发生变化的地方)

因此,依赖关系(Dep)将只起到这样的作用。只是依赖部分,不包含任何值。值存储在状态中。

reactive 函数

reactive()函数可以看作是状态的初始化。我们将带有初始值的对象传递给它,然后将其转换为依赖项。

对于每个对象属性,必须完成以下操作:

定义依赖关系(Dep)

定义者getter

定义赋值

function reactive(obj) {
    Object.keys(obj).forEach((key) => {
        const dep = new Dep()
        let value = obj[key]
        Object.defineProperty(obj, key, {
            get() {
                dep.depend()
                return value
            },
            set(newValue) {
                if (newValue !== value) {
                    value = newValue
                    dep.notify()
                }
            },
        })
    })
    return obj
}

依赖项上的更改

此外,我们需要从依赖项中移除getter和setter,因为我们现在是在反应状态下做的:

class Dep {
    subscribers = new Set()
    depend() {
        if (activeEffect) this.subscribers.add(activeEffect)
    }
    notify() {
        this.subscribers.forEach((sub) => sub())
    }
}

watchEffect功能保持不变。

试试代码

我们已经完成了将依赖变量转换为反应状态的工作。现在我们可以尝试代码:

const state = reactive({
    count: 1,
    name: 'Marc',
})

watchEffect(() => {
    console.log('? state changed', state.count, state.name)
})

setTimeout(() => {
    state.count++
    state.name = 'Johnny'
}, 1000)

setTimeout(() => {
    state.count++
}, 2000)
setTimeout(() => {
    state.count++
}, 3000)

打印出来:

? state changed 1 Marc
? state changed 2 Marc
? state changed 2 Johnny
? state changed 3 Johnny
? state changed 4 John
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-09-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 CryptoCode 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是状态反应?
  • 函数监视更改
  • 依赖类
  • 构造
  • Getter
  • Setter
  • 试试
  • 2. 构建反应状态
  • reactive 函数
  • 依赖项上的更改
  • 试试代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档