本文共 3429 字，大约阅读时间需要 11 分钟。

1. 自己动手实现响应式

1.1. 原理

1.1.1. 两个问题

首先给你如下的一段代码，要实现响应式，你需要考虑什么问题？

   
        {
  { message }} 
        {
  { message }} 
        {
  { message }} 
        {
  { name }}
   

• app.message 修改后，vue 内部如何监听 message 发生改变？
• vue 监听到它发生改变，怎么通知页面中的使用者更新？

答案：Object.defineProperty() -> 监听对象属性的改变；通过发布-订阅模式 -> 让对应的使用者更新

1.1.2. Object.defineProperty()

下面看一下，Object.defineProperty 大致是怎么实现数据劫持的

let data = {
    // 假设这是 Vue.data 对象     message: 'hello',    name: 'yu wan'}Object.keys(data).forEach(key => {
       let value = data[key]    Object.defineProperty(data, key, {
           set(newVal) {
               // 这里的逻辑应该是什么呢？既然外部通过 data.message = 'xxx' 来修改了它，那我就应该通知它的使用者更新数据塞            // 如上面的 message，是张三、李四、王五在用，就要通知他们仨，这就需要发布-订阅模式了            value = newVal        },        get() {
               // 这里的逻辑又应该是什么呢？既然页面能够显示 message 的值，说明这里就要记录哪些人用的是 message，哪些人用的是 name 塞            return value        }    })})// 只要调用 data.name -> 就会触发 get()// 只要调用 data.name = 'xxx' -> 就会触发 set()

1.1.3. 发布-订阅模式

那就先说说，发布-订阅模式这里面的一些属于吧（指的是 vue 源码中用到的名称）

• 发布者（Dep）：它就像个公众号，有新的文章发出来了，就会推送给所有的用户
• 订阅者（Watcher）：它就好比用户，都去关注某个公众号，有新的文章，用户就会去读这个文章

class Dep {
    // dependency-发布者    constructor() {
           this.subs = [] // subscribes-存放它所有订阅者    }    addSub(watcher) {
           this.subs.push(watcher) // 用户添加订阅    }    notify() {
    // 给所有订阅者推送消息        const subs = this.subs.slice()        for (let i = 0, l = subs.length; i < l; i++) {
               subs[i].update() // 让所有的 message 用户修改它们的值        }    }}class Watcher {
    // 订阅者    constructor(name) {
           this.name = name // 只是一个示例，区分不同订阅者    }    update() {
           console.log(this.name + '更新了！');    }}// 相当于执行了上面 Object.keys(obj).forEach() 里的 get() 方法，就会让那几个人来订阅const dep = new Dep()const w1 = new Watcher('张三')dep.addSub(w1)const w2 = new Watcher('李四')dep.addSub(w2)const w3 = new Watcher('王五')dep.addSub(w3)// 一旦修改 data.message ，就在 set() 那里通知所有人更新dep.notify() // 说明每个字段都有一个 dep，如 message 有一个 dep 记录着，name 有一个 dep 记录着

1.1.4. el

el 需要干啥呢？

• 正如第一段代码，我们传给了 Vue() 一个 el 属性，肯定要把 #app 里面的 {
  {}} 用法都解析出来，然后再展示里面的数据
• 还有一个问题，我们怎么知道 message 就刚好三个人用呢？，因此在解析的时候还需要根据{
  {}} 来生成对应的 Watcher，并添加到相应的 Dep 中

1.1.5. 原理图

这个时候，把原理图拿出来，应该都能够明白了吧 🥰

• 把 data 交给 Observer，它来劫持数据，然后为每个字段（message、name）生成相应的 Dep 对象
• el 读取到 #app 的内容，把里面的字段（{
  {name}}、{
  {message}}）都生成 Watcher，然后分别订阅 Dep（即加入到相应的 Dep 对象中）
• Observer 里 set() 那里监听到变化，就通知对应的 dep，然后 dep.notify() 就会让所有使用 message 的人更新数据

1.2. 实践

说了这么多，下面就来写一个最简单的双向绑定，先准备好我们的 HTML🤗

   
    
        
    {
  { username }}
   

1.2.1. 所有的类写出来

先写出这五个必须用到的类：Vue、Observer、Dep、Watcher、Compiler，其他的逻辑下一步再写

1.2.2. 基础逻辑

根据上面的原理图，我们知道 new Vue({}) 的时候，是分两步走的，一部分是去交给了 Observer，另一部分是把 el 拿去解析了，因此可以添加下面的一些代码

1.2.3. 代理

现在上面的代码，执行会发现如下结果，其实原因很简单 绑定初值：node.value = this.vm[name]，我们有给 app.message 赋值吗，或者说有给它添加这个属性吗？当然没有

class Vue {
           constructor(options) {
               // ...            // 代理所有的 data 属性            Object.keys(this.$data).forEach(key=>{
                   this._proxy(key)            })            // ...        }        _proxy(key){
               Object.defineProperty(this, key, {
    // 定义 this.username                enumerable: true,                configurable: true,                get() {
                       return this.$data[key]                },                set(v) {
                       this.$data[key] = v                }            })        }    }

1.2.4. 恭喜

经过以上的操作，相信你已经掌握了基本的原理了，接下来去学习更多吧！😁

转载地址：https://blog.csdn.net/qq_39811414/article/details/116724303 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！