当前位置:首页 > 技术 > 正文内容

Vue 响应式原理模拟以及最小版本的 Vue的模拟

Lotus2022-12-19 10:20技术

在模拟最小的vue之前,先复习一下,发布订阅模式和观察者模式

对两种模式有了了解之后,对Vue2.0和Vue3.0的数据响应式核心原理

1.Vue2.0和Vue3.0的数据响应式核心原理

(1).  Vue2.0是采用Object.defineProperty的方式,对数据进行get,set方法设置的, 具体可以详见Object.defineProperty的介绍

浏览器兼容 IE8 以上(不兼容 IE8)
<script>
    // 模拟 Vue 中的 data 选项
    let data = {
      msg: 'hello'
    }

    // 模拟 Vue 的实例
    let vm = {}

    // 数据劫持:当访问或者设置 vm 中的成员的时候,做一些干预操作
    Object.defineProperty(vm, 'msg', {
      // 可枚举(可遍历)
      enumerable: true,
      // 可配置(可以使用 delete 删除,可以通过 defineProperty 重新定义)
      configurable: true,
      // 当获取值的时候执行
      get () {
        console.log('get: ', data.msg)
        return data.msg
      },
      // 当设置值的时候执行
      set (newValue) {
        console.log('set: ', newValue)
        if (newValue === data.msg) {
          return
        }
        data.msg = newValue
        // 数据更改,更新 DOM 的值
        document.querySelector('#app').textContent = data.msg
      }
    })

    // 测试
    vm.msg = 'Hello World'
    console.log(vm.msg)
  </script>

如果,vm里的属性是对象如何处理,可以,对其遍历,在进行Object.defineProperty

<script>
    // 模拟 Vue 中的 data 选项
    let data = {
      msg: 'hello',
      count: 10,
      person: {name: 'zhangsan'}
    }

    // 模拟 Vue 的实例
    let vm = {}

    proxyData(data)

    function proxyData(data) {
      // 遍历 data 对象的所有属性
      Object.keys(data).forEach(key => {
        // 把 data 中的属性,转换成 vm 的 setter/setter
        Object.defineProperty(vm, key, {
          enumerable: true,
          configurable: true,
          get () {
            console.log('get: ', key, data[key])
            return data[key]
          },
          set (newValue) {
            console.log('set: ', key, newValue)
            if (newValue === data[key]) {
              return
            }
            data[key] = newValue
            // 数据更改,更新 DOM 的值
            document.querySelector('#app').textContent = data[key]
          }
        })
      })
    }

    // 测试
    vm.msg = 'Hello World'
    console.log(vm.msg)
  </script>

(2). Vue3.x是采用proxy代理的方式实现, 直接监听对象,而非属性。ES 6中新增,IE 不支持,性能由浏览器优化,具体可以详见MDN - Proxy

<script>
    // 模拟 Vue 中的 data 选项
    let data = {
      msg: 'hello',
      count: 0
    }

    // 模拟 Vue 实例
    let vm = new Proxy(data, {
      // 执行代理行为的函数
      // 当访问 vm 的成员会执行
      get (target, key) {
        console.log('get, key: ', key, target[key])
        return target[key]
      },
      // 当设置 vm 的成员会执行
      set (target, key, newValue) {
        console.log('set, key: ', key, newValue)
        if (target[key] === newValue) {
          return
        }
        target[key] = newValue
        document.querySelector('#app').textContent = target[key]
      }
    })

    // 测试
    vm.msg = 'Hello World'
    console.log(vm.msg)
  </script>

2.Vue 响应式原理模拟

看图,整体分析

 Vue
  • 把 data 中的成员注入到 Vue 实例,并且把 data 中的成员转成 getter/setter
Observer
  • 能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知 Dep
Compiler
  • 解析每个元素中的指令/插值表达式,并替换成相应的数据
Dep
  • 添加观察者(watcher),当数据变化通知所有观察者
Watcher
  • 数据变化更新视图 

 (1) Vue

功能
  • 负责接收初始化的参数(选项)
  • 负责把 data 中的属性注入到 Vue 实例,转换成 getter/setter
  • 负责调用 observer 监听 data 中所有属性的变化
  • 负责调用 compiler 解析指令/插值表达式
class Vue {
    constructor (options) {
        //1.通过属性保存选项的数据
        this.$options = options || {}
        this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
        this.$data = options.data || {}
        //2.把data中的成员转换成getter和setter方法,注入到vue实例中
        this._proxyData(this.$data)
        //3.调用observer对象,监听数据变化
        new Observer(this.$data)
        //4.调用compiler对象, 解析指令和差值表达式
        new Compiler(this)
    }

    _proxyData (data) {
        //遍历data中的所有属性
        Object.keys(data).forEach( key => {
            //把data的属性注入到vue实例中
            Object.defineProperty(this, key, {
                enumerable: true,
                configurable: true,
                get () {
                    return data[key]
                },
                set (newValue) {
                    if (newValue === data[key]) {
                        return 
                    }
                    data[key] = newValue
                }

            })
        })

    }

}

(2)Observer

功能
  • 负责把 data 选项中的属性转换成响应式数据
  • data 中的某个属性也是对象,把该属性转换成响应式数据
  • 数据变化发送通知 
class Observer {
    constructor (data) {
        this.walk(data)
    }
    //1.
    walk (data) {
        //1.判断data是不是对象
        if (!data || typeof data !== 'object') {
            return
        }
        //遍历data对象里的所有属性
        Object.keys(data).forEach( key => {
            this.definedReactive(data, key, data[key])
        })
    }

    definedReactive (obj, key, value) {
        let that = this
        //负责收集依赖(观察者), 并发送通知
        let dep = new Dep()

        this.walk(value)//如果data里的属性是对象,对象里面的属性也得是响应式的,所以得判断一下
        
        Object.defineProperty (obj, key, {
            enumerable: true,
            configurable: true,
            get () {
                //收集依赖
                Dep.target && dep.addSubs(Dep.target)
                return value
                // return obj[key]//这么写会引起堆栈溢出
            },
            set (newValue) {
                if (newValue === value) {
                    return 
                }
                
                value = newValue
                that.walk(newValue)//如果赋值为对象,对象里面的属性得是响应式数据

                //数据变换 ,发送通知给watcher的update ,在渲染视图里的数据
                dep.notify()
            }    
                
        }) 
    }

}

(3).Compiler

功能
  • 负责编译模板,解析指令/插值表达式
  • 负责页面的首次渲染
  • 当数据变化后重新渲染视图 
class Compiler {

    constructor (vm) {//传个vue实例
        this.el = vm.$el
        this.vm = vm
        this.compile(this.el)
    }

    //编译模板, 处理文本节点和元素节点
    compile (el) {

        let childNodes = el.childNodes //获取子节点  伪数组
        console.dir(el.childNodes)
        Array.from(childNodes).forEach( node => {
            if (this.isTextNode(node)) { //是文本节点
                this.compileText(node)
            } else if (this.isElementNode(node)) {//是元素节点
                this.compileElement(node)
            }

            if (node.childNodes && node.childNodes.length) { //子节点里面还有节点,递归遍历获取
                this.compile(node)
            }
        })
    }

    //编译元素节点, 处理指令
    compileElement (node) {
        //console.log(node.attributes)

        Array.from(node.attributes).forEach( attr => {

            //判断是不是指令
            let attrName = attr.name //<div v-text="msg"></div> 里的v-text
            if (this.isDirective(attrName)) {
                //v-text --> text
                attrName = attrName.substr(2)
                let key = attr.value   //<div v-text="msg"></div> 里的msg
                this.update(node , key, attrName) 
            }
        })
    }

    update (node, key, attrName) {
        let updateFn = this[attrName + 'Updater']
        updateFn && updateFn.call(this, node, this.vm[key], key)//call方法改变this指向
    }
    //处理v-text 命令
    textUpdater (node, value, key) {
        node.textContent = value
        new Watcher(this.vm, key, (newValue) => {
            node.textContent = newValue
        })
    }
    //v-model
    modelUpdater (node, value, key) {
        node.value = value
        new Watcher(this.vm, key, (newValue) => {
            node.value = newValue
        })

        //双向绑定,视图改变,数据也会更新
        node.addEventListener('input', () => {
            this.vm[key] = node.value
        })
    }

    //编译文本节点,处理差值表达式
    compileText (node) {
        //console.dir(node)
        // {{  msg   }}
        let reg = /\{\{(.+?)\}\}/
        let value = node.textContent //里面的内容, 也可以是nodeValue
        if (reg.test(value)) {
            let key = RegExp.$1.trim()  //匹配到的第一个
            node.textContent = value.replace(reg, this.vm[key])

            //创建watcher对象, 当数据改变更新视图
            new Watcher(this.vm, key, (newValue) => {
                node.textContent = newValue
            })
        }
    }

    //判断元素属性是否是指令
    isDirective (attrName) {
        return attrName.startsWith('v-')
    }

    //判断节点是否是文本节点
    isTextNode (node) {
        return node.nodeType === 3
    }

    //判断节点是否是元素节点
    isElementNode (node) {
        return node.nodeType === 1
    }
}

(4).Dep(Dependency)

 

 功能

  • 收集依赖,添加观察者(watcher)
  • 通知所有观察者 
class Dep {

    constructor () {
        //收集观察者
        this.subs = []
    }

    //添加观察者
    addSubs (watcher) {
        if (watcher && watcher.update) {
            this.subs.push(watcher)
        }
    }
    //数据变换,就调watcher的update方法
    notify () {
        this.subs.forEach(watcher => {
            watcher.update()
        });
    }
}

(5).Watcher

 

 功能

  • 当数据变化触发依赖, dep 通知所有的 Watcher 实例更新视图
  • 自身实例化的时候往 dep 对象中添加自己 
class Watcher {
    constructor (vm, key, callback) {
        this.vm = vm
        //data中的属性名
        this.key = key
        this.callback = callback
        //将watcher对象记录在Dep的静态属性target
        Dep.target = this
        //触发get方法,触发get里的addsubs方法,添加watcher
        this.oldValue = vm[key]
        Dep.target = null
    }

    //当数据变化的时候,更新视图
    update () {
        let newValue = this.vm[this.key]
        if (this.oldValue === newValue) {
            return
        }
        this.callback(newValue)
    }
}

总结:

 

 Vue

  • 记录传入的选项,设置 $data/$el
  • data 的成员注入到 Vue 实例
  • 负责调用 Observer 实现数据响应式处理(数据劫持)
  • 负责调用 Compiler 编译指令/插值表达式等
Observer
  • 数据劫持
  • 负责把 data 中的成员转换成 getter/setter
  • 负责把多层属性转换成 getter/setter
  • 如果给属性赋值为新对象,把新对象的成员设置为 getter/setter
  • 添加 Dep Watcher 的依赖关系
  • 数据变化发送通知
Compiler
  • 负责编译模板,解析指令/插值表达式
  • 负责页面的首次渲染过程
  • 当数据变化后重新渲染
Dep
  • 收集依赖,添加订阅者(watcher)
  • 通知所有订阅者
Watcher
  • 自身实例化的时候往dep对象中添加自己
  • 当数据变化dep通知所有的 Watcher 实例更新视图

 

原文链接

扫描二维码推送至手机访问。

版权声明:本文来源于网络,仅供学习,如侵权请联系站长删除。

本文链接:https://news.layui.org.cn/post/1179.html

分享给朋友:

“Vue 响应式原理模拟以及最小版本的 Vue的模拟” 的相关文章

HBase1.4.6安装搭建及shell命令使用

HBase1.4.6安装搭建 目录 HBase1.4.6安装搭建 一、前期准备(Hadoop,zookeeper,jdk) 搭建Hbase 1、上传解压 2、配置环境变量 3、修改hbase-env.sh文件 4、修改hbase-site.xml文件 5、修改regionservers文件 6、同步到所有节点(如果是伪分布式不需要同步) 7、启动hbase集群 , 在master上执行...

【存储数据恢复】某品牌EqualLogic系列存储介绍&常见故障的数据恢复方法

某品牌EqualLogic系列存储介绍: 某品牌EqualLogic系列存储可以通过连接串口先对存储进行初始化。 通过浏览器登录配置的ip地址,账号默认:grpadmin,密码默认:grpadmin;也可以通过串口登陆查看状态。 卷的划分和访问如下图: 底层结构: 以9块盘组建磁盘阵列为例,该存储在创建RAID的时候,会默认分配一块热备盘,并不是全局热备。 用8块...

路由基础之中级网络工程师企业网络架构BGP​

路由基础之中级网络工程师企业网络架构BGP​ 原理概述:​ 防火墙(英语:Firewall)技术是通过有机结合各类用于安全管理与筛选的软件和硬件设备,帮助计算机网络于其内、外网之间构建一道相对隔绝的保护屏障,以保护用户资料与信息安全性的一种技术。​ 防火墙技术的功能主要在于及时发现并处理计算机网络运行时可能存在的安全风险、数据传输等问题,其中处理措施包括隔离与保护,同时可对计算机网络安全当中的各...

十分钟速成DevOps实践

摘要:以华为云软件开发平台DevCloud为例,十分钟简单体验下DevOps应用上云实践——H5经典小游戏上云。 本文分享自华为云社区《​​《DevOps实践秘籍》十分钟速成DevOps实践​​》,作者:AppCloud小助手 。 DevOps是什么? DevOps是Development和Operations的组合词,简单点理解就是研发运维一体化的方法论,目的是通过自动化“软件交付”和“架构变...

条件期望:Conditional Expectation 举例详解之入门之入门之草履虫都说听懂了

我知道有很多人理解不了 “条件期望” (Conditional Expectation) 这个东西,有的时候没看清把随机变量看成事件,把 \(\sigma\)-algebra 看成随机变量从而思路全错的时候,我也会觉得莫名奇妙。所以在这里用一个极其简单的例子解释一下,只要你是一只上过高中的草履虫那就能听懂。 \[\] 我们来丢一枚质地均匀的硬币(意味着得到正面与反面的概率各为 \(\frac{...

Codeforces Round #822 (Div. 2) A-F

比赛链接 A 题解 知识点:贪心。 注意到任意三根木棍的相等最优解是最长减最小,因此从小到大排序,三个三个取,取最小值。 时间复杂度 \(O(n\log n)\) 空间复杂度 \(O(n)\) 代码 #include <bits/stdc++.h> #define ll long long using namespace std; ll a[307]; bool solve() {...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。