Vue响应式原理模拟实现原理探究

2024-10-22 02:44:26

前置知识

数据驱动

数据响应式——Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们时，视图会随即自动更新。

双向绑定——数据改变，视图改变；视图改变，数据也随之改变

数据驱动是Vue最独特的特性之一 —— 开发者只需关注数据本身，而无需关心数据如何渲染到视图

数据响应式的核心原理

Vue 2.x

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    hello
  </div>
  <script>
    // 模拟Vue中的data选项
    let data = {
      msg: 'hello'
    }
    // 模拟Vue的实例
    let vm = {}
    // 数据劫持，当访问或设置vm中的成员的时候，做一些操作
    Object.defineProperty(vm, 'msg', {
      // 是否可以枚举
      enumerable: true,
      // 是否可配置，即delete删除
      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.getElementById('app').textContent = data.msg
      }
    })
    // 测试
    vm.msg = 'Hello World'
    console.log(vm.msg)
  </script>
</body>
</html>

当data中有多个对象时，需要对其进行遍历，此时需要对上述代码进行一些改造。

let data = {
  msg: 'hello',
  count: 10
}
let vm = {}
proxyData(data)
function proxyData(data) {
  Object.keys(data).forEach(key => {
    Object.defineProperty(vm, key, {
      enumerable: true,
      configurable: true,
      get() {
        return data[key]
      },
      set(newValue) {
        if (newValue === data[key]) return
        data[key] = newValue
        document.querySelector('#app').textContent = data[key]
      }
    })
  })
}

Vue 3.x

步入Vue3，尤小右使用Proxy对其进行了改造，不仅抛弃了如 $delete 之类的鸡肋API（因为Proxy可以监听删除属性），还提升了性能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">hello</div>
  <script>
    let data = {
      msg: 'hello',
      count: 0
    }
    let vm = new Proxy(data, {
      get(target, key) {
        return target[key]
      },
      set(target, key, newValue) {
        if (target[key] === newValue) return
        target[key] = newValue
        document.querySelector('#app').textContent = target[key]
      }
    })
  </script>
</body>
</html>

发布订阅和观察者模式

发布/订阅模式

注：为简便起见，代码实现并未加入对传参的考虑。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    class EventEmitter {
      constructor() {
        this.subs = Object.create(null)
      }
      // 注册事件
      $on(eventType, handler) {
        this.subs[eventType] = this.subs[eventType]  || []
        this.subs[eventType].push(handler)
      }
      $emit(eventType) {
        if (this.subs[eventType]) {
          this.subs[eventType].forEach(handler => {
            handler()
          })
        }
      }
    }
    // 测试
    let em = new EventEmitter()
    em.$on('click', () => {
      console.log('click1');
    })
    em.$on('click', () => {
      console.log('click2');
    })
    em.$emit('click')
  </script>
</body>
</html>

观察者模式

注：为简便起见，代码实现并未加入对传参的考虑。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>观察者模式</title>
</head>
<body>
  <script>
    // 发布者-目标
    class Dep {
      constructor() {
        this.subs = []
      }
      addSub(sub) {
        if (sub && sub.update) {
          this.subs.push(sub)
        }
      }
      notify() {
        this.subs.forEach(sub => {
          sub.update()
        })
      }
    }
    class Watcher {
      update() {
        console.log('update')
      }
    }
    // 测试
    let dep = new Dep()
    let watcher = new Watcher()
    dep.addSub(watcher)
    dep.notify()
  </script>
</body>
</html>

Vue响应式原理模拟实现

Vue

功能

接收初始化参数
将data中的数据注入实例并转换成getter/setter
调用observer监听data中属性的变化
调用compiler解析指令/插值表达式

class Vue {
  constructor(options) {
    // 1. 通过属性保存选项的数据
    this.$options = options || {}
    this.$data = options.data || {}
    this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
    // 2. 把data中的数据转换为getter和setter，并注入到Vue实例中
    this._proxyData(this.$data)
    // 3. 调用observer对象，监听数据的变化
    new Observer(this.$data)
    // 4. 调用compiler对象，解析指令和插值表达式
    new Compiler(this)
  }
  _proxyData(data) {
    Object.keys(data).forEach(key => {
      Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get() {
          return data[key]
        },
        set(newValue) {
          if (newValue === data[key]) return
          data[key] = newValue
        }
      })
    })
  }
}

Observer对data中的属性进行监听

class Observer {
  constructor(data) {
    this.walk(data)
  }
  walk(data) {
    // 1.判断data是否是对象
    if (!data || typeof data !== 'object') {
      return
    }
    // 2.遍历data对象的所有属性
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key])
    })
  }
  defineReactive(obj, key, val) {
    let that = this
    // 负责收集依赖
    let dep = new Dep()
    // 如果val是对象，会将其内部的对象也变成响应式数据
    this.walk(val)
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        // 收集依赖
        Dep.target && dep.addSub(Dep.target)
        return val
      },
      set(newValue) {
        if (newValue === val) {
          return
        }
        val = newValue
        that.walk(newValue)
        // 发送通知
        dep.notify()
      }
    })
  }
}

Compiler

class Compiler {
  constructor(vm) {
    this.el = vm.$el
    this.vm = vm
    this.compile(this.el)
  }
  // 编译模板，处理文本节点和元素节点
  compile(el) {
    let childNodes = el.childNodes
    Array.from(childNodes).forEach(node => {
      // 处理文本节点
      if (this.isTextNode(node)) {
        this.compileText(node)
      } else if (this.isElementNode(node)) {
        // 处理元素节点
        this.comipleElement(node)
      }
      // 判断node节点是否有子节点
      if (node.childNodes && node.childNodes.length) {
        this.compile(node)
      }
    })
  }
  // 编译元素节点，处理指令
  comipleElement(node) {
    Array.from(node.attributes).forEach(attr => {
      let attrName = attr.name
      if (this.isDirective(attrName)) {
        // v-text => text
        attrName = attrName.substr(2)
        let key = attr.value
        this.update(node, key, attrName)
      }
    })
  }
  update(node, key, attrName) {
    let updateFn = this[attrName + 'Updater']
    updateFn && updateFn.call(this, node, this.vm[key], key)
  }
  // 处理 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);
    let reg = /\{\{(.+?)\}\}/
    let value = node.textContent
    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
  }
}

Watcher

class Watcher {
  constructor(vm, key, cb) {
    this.vm = vm
    // data中的属性名称
    this.key = key
    // 回调函数负责更新视图
    this.cb = cb
    // 把watcher对象记录到Dep类的静态属性target
    Dep.target = this
    // 触发get方法，在get方法中会调用addSub
    this.oldValue = vm[key]
    Dep.target = null
  }
  // 当数据发生变化的时候更新视图
  update() {
    let newValue = this.vm[this.key]
    if (this.oldValue === newValue) {
      return
    }
    this.cb(newValue)
  }
}

Dep

class Dep {
  constructor() {
    this.subs = []
  }
  // 添加观察者
  addSub(sub) {
    if (sub && sub.update) {
      this.subs.push(sub)
    }
  }
  // 发送通知
  notify() {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}

测试代码

<!DOCTYPE html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mini Vue</title>
</head>
<body>
  <div id="app">
    <h1>差值表达式</h1>
    <h3>{{ msg }}</h3>
    <h3>{{ count }}</h3>
    <h1>v-text</h1>
    <div v-text="msg"></div>
    <h1>v-model</h1>
    <input type="text" v-model="msg">
    <input type="text" v-model="count">
  </div>
  <script src="./js/dep.js"></script>
  <script src="./js/watcher.js"></script>
  <script src="./js/compiler.js"></script>
  <script src="./js/observer.js"></script>
  <script src="./js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        count: 100
      }
    })
    vm.test = 'abc'
  </script>
</body>
</html>

到此这篇关于 Vue响应式原理模拟实现原理探究的文章就介绍到这了,更多相关 Vue响应式原理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue如何使用媒体查询实现响应式

目录使用媒体查询实现响应式的两种方式前提 1.在每个组件中为其使用媒体查询 2.写n套页面,在使用这些页面的组件中进行一次媒体查询 vue中的媒体查询语法使用媒体查询实现响应式的两种方式前提依赖: sass,sass-loader 1.在每个组件中为其使用媒体查询这种方法的有点是减少了重写不同终端同一组件的工作量,缺点是每个组件都要使用媒体查询,当一套页面组件不同时,需要进行组件的显示与隐藏(display:none!important),在不同终端区别不大的情况下建议使用这种方法
关于Vue3中的响应式原理

目录一.简介二.响应核心 1.核心源码 2.逐步分析上述示例代码 3.收集依赖和触发依赖更新三.V3.2的响应式优化四.后话一.简介本章内容主要通过具体的简单示例来分析Vue3是如何实现响应式的.理解本章需要了解Vue3的响应式对象.只注重原理设计层面,细节不做太多讲解. 二.响应核心 1.核心源码 export class ReactiveEffect<T = any> { //是否激活 active = true //依赖列表 deps: Dep[] = [] // can b
vue中响应式布局如何将字体大小改成自适应

目录响应式布局将字体大小改成自适应 vue文字大小自适应问题响应式布局将字体大小改成自适应 1.在app.vue的生命周期函数中添加一段代码来设置页面的rem mounted: function() { // 页面开始加载时修改font-size var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.doc
关于vue2响应式缺陷的问题

目录 vue2响应式缺陷 1.对象新增的属性没有响应式 2.数组的部分操作没有响应式 vue2与vue3的响应式原理 vue2响应式 vue3响应式雏形 vue3的响应式相较于vue2的优势 vue2响应式缺陷响应式 : 数据改变 ==> 视图跟着改变 vue2响应式缺陷 1.对象新增的属性没有响应式对象,新增属性b,修改b的值,值改变但视图并未更新解决方案 : 使用vue提供的 api $set(对象,属性名,值) 效果如属性c 2.数组的部分操作没有响应式数组中有7种操作有响应式 a
vue视图响应式更新详细介绍

目录概述思路第一步统一封装更新函数第二步监听并触发视图更新引入Dep管家实现下语法糖v-model 概述前面两篇文章已经实现了对数据的变化的监听以及模板语法编译初始化,但是当数据变化时,视图还不能够跟随数据实时更新.本文就在之前的基础上介绍下视图响应式更新部分. 思路统一封装更新函数待数据发生改变时调用对应的更新函数这里思考个问题: 在何时注册这个更新函数? 如何找到对应的更新函数? 第一步统一封装更新函数基于上篇文章compile的部分,将数据初始化的部分统一封装起来.
Vue响应式原理模拟实现原理探究

目录前置知识数据驱动数据响应式的核心原理 Vue 2.x Vue 3.x 发布订阅和观察者模式发布/订阅模式观察者模式 Vue响应式原理模拟实现 Vue Observer对data中的属性进行监听 Compiler Watcher Dep 测试代码前置知识数据驱动数据响应式——Vue 最标志性的功能就是其低侵入性的响应式系统.组件状态都是由响应式的 JavaScript 对象组成的.当更改它们时,视图会随即自动更新. 双向绑定——数据改变,视图改变:视图改变,数据也随之改变数据
Vue响应式原理Observer、Dep、Watcher理解

开篇最近在学习Vue的源码,看了网上一些大神的博客,看起来感觉还是蛮吃力的.自己记录一下学习的理解,希望能够达到简单易懂,不看源码也能理解的效果
详细分析vue响应式原理

前言响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图.在面试中是经常考查的知识点,也是面试加分项. 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它们有助于理解流程将流程拆分,理解其中的作用结合以上的点,理解整体流程文章稍长,但大部分是代码实现,还请耐心观看.为了方便理解原理,文中的代码会进行简化,如果可以请对照源码学习. 主要成员响应式原理中,Observe.Watcher.Dep这三个类是构成完整原理的主要成员. Observe,响
vue响应式原理与双向数据的深入解析

了解object.defineProperty 实现响应式清楚 observe/watcher/dep 具体指的是什么了解发布订阅模式以及其解决的具体问题在Javascript里实现数据响应式一般有俩种方案,分别对应着vue2.x 和 vue3.x使用的方式,他们分别是: 对象属性拦截 (vue2.x) Object.defineProperty 对象整体代理 (vue3.x) Proxy 提示:以下是本篇文章正文内容,下面案例可供参考 vue-响应式是什么? Vue 最独特的特性之一
Vue响应式系统的原理详解

目录 vue响应式系统的基本原理 1.回顾一下Object.defineProperty的用法 2.实战1:使用 Object.defineProperty 对 person的age属性进行监听 3.数据代理 4.vue中实现响应式思路总结 1.Vue中的数据代理: 2.Vue中数据代理的好处: 3.基本原理: 4.vue中实现响应式思路 vue响应式系统的基本原理我们使用vue时,对数据进行操作,就能影响对应的视图.那么这种机制是怎么实现的呢? 思考一下,是不是就好像我们对数据的操作被
Vue响应式原理的示例详解

Vue 最独特的特性之一,是非侵入式的响应系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.聊到 Vue 响应式实现原理,众多开发者都知道实现的关键在于利用 Object.defineProperty , 但具体又是如何实现的呢,今天我们来一探究竟. 为了通俗易懂,我们还是从一个小的示例开始: <body> <div id="app"> {{ message }} </div> <script> v
图解Vue 响应式流程及原理

目录阅读本文能够帮助你什么? 一.组件化流程 1. 整个new Vue阶段做了什么? 2. 普通dom元素如何渲染到页面? 3. 组件如何渲染到页面? 4. Vue组件化简化流程二.响应式流程 1. 依赖收集 2. 派发更新三.彩蛋篇 1. computed依赖收集 2. computed派发更新 3. user Watcher依赖收集阅读本文能够帮助你什么? 在学习vue源码的时候发现组件化过程很绕? 在响应式过程中Observer.Dep.Watcher三大对象傻傻分不清? 搞不清楚
一篇文章带你彻底搞懂VUE响应式原理

目录响应式原理图编译创建compile类操作fragment 获取元素节点上的信息获取文本节点信息操作fragment 响应式数据劫持收集依赖响应式代码完善 Dep类全局watcher用完清空依赖的update方法需要注意的一个地方双剑合璧总结首先上图,下面这张图,即为MVVM响应式原理的整个过程图,我们本篇都是围绕着这张图进行分析,所以这张图是重中之重. 响应式原理图一脸懵逼?没关系,接下来我们将通过创建一个简单的MVVM响应系统来一步步了解这个上图中的全过程.
Vue 响应式系统依赖收集过程原理解析

目录背景目标源码解读入口函数:observe class Observer Observe 如何处理数组 Observe 如何处理对象 class Dep Dep.target class Watcher Watcher 的应用何时触发依赖收集? 数据变化时,如何进行更新? 总结参考资料背景在 Vue 的初始化阶段,_init 方法执行的时候,会执行 initState(vm) ,它的定义在 src/core/instance/state.js 中.在初始化 data 和 pro
Vue响应式原理及双向数据绑定示例分析

目录前言响应式原理双向数据绑定前言之前公司招人,面试了一些的前端同学,因为公司使用的前端技术是Vue,所以免不了问到其响应式原理和Vue的双向数据绑定.但是这边面试到的80%的同学会把两者搞混,通常我要是先问响应式原理再问双向数据绑定原理,来面试的同学大都会认为是一回事,那么这里我们就说一下二者的区别. 响应式原理是Vue的核心特性之一,数据驱动视图,我们修改数据视图随之响应更新,就很优雅~ Vue2.x是借助Object.defineProperty()实现的,而Vue3.x是借助