前端学习之路(2) Vue3响应式模式设计原理

于 2024-02-03 16:58:53 发布
阅读量673 收藏 7
点赞数 3
分类专栏： 前端 文章标签： 前端 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32907491/article/details/136009969
版权

为什么要关系vue3的设计原理？了解vue3构建原理，将有助于开发者更快速上手Vue3；同时可以提高Vue调试技能，可以快速定位错误

1.vue3对比vue2

  1. vue2的原理是通过 Object.defineProperty() 来劫持各个属性，在数据变动时发布消息给订阅者，触发相应的监听回调。

defineProperty不具备监听数组的能力,无法检测到对象属性的添加和删除,只有在初始化实例时对data对象转换响应式,后面新增的需要手动转换,深度监听需要一次性递归，性能不好

  1. vue3的原理基于ES6新特性Proxy对象代理

可以监听原生数组,不需要一次性遍历data的属性,提高性能,vue3将响应式模块分离封装,可以随时对对象进行代理,为组合式api提供了可能,因为Proxy是ES6新增的属性，有些浏览器还不支持,只能兼容到IE11

可以看出vue3的响应式给开发者带来极大的便利，深层次的对象监听中，再也不怕层级问题或者新增属性问题带来的监听失效

2.针对编程语言的编程

vue的响应式设计，使用了ES6的新特性，如：Proxy，WeakMap，Reflect…，从而对javascript进行了编程

  • 步骤一: 追踪一个变量
const price = 5  
let quantity = 2  
let total = 0  
let storage = 0  
  
// Set对象是值的集合 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。  
let dep = new Set()   
  
let effect1 = () => { total = price * quantity }  
let effect2 = () => { storage = 100 - quantity }  
  
function track() {  
  dep.add(effect1)  
  dep.add(effect2)  
}  
function trigger() { dep.forEach(effect => effect()) }  
  
track()  
effect1()  
effect2()  
  
// 运行  
> total  
10  
> storage  
98  
> quantity = 5  
5  
> total  
10  
> storage  
98  
> trigger()  
undefined  
> total  
25  
> storage  
95
  • 步骤二: 追踪对象中的属性
let product = { price: 5, quantity: 2 }  
let total = 0  
  
// Map 对象保存键值对。任何值都可以作为一个键或一个值  
const depsMap = new Map()   
  
let effect = () => {  
  total = product.price * product.quantity  
}  
  
function track(key) {  
  let dep = depsMap.get(key)  
  if (!dep) {  
    depsMap.set(key, (dep = new Set()))  
  }  
  dep.add(effect)  
}  
function trigger(key) {  
  let dep = depsMap.get(key)  
  if (dep) {  
    dep.forEach(effect => effect())  
  }  
}  
  
track('price')  
track('quantity')  
effect()  
  
// 运行  
> total  
10  
> product.quantity = 8  
8  
> total  
10  
> trigger('price')  
undefined  
> total  
16  
> product.quantity = 4  
4  
> total  
16  
> trigger('quantity')  
undefined  
> total  
32
  • 步骤三: 追踪多个对象

tips: javascript 中垃圾回收的算法
JavaScript 中的内存管理是自动执行的，程序中不需要使用的数据或者程序无法访问到的数据都是垃圾，JavaScript会自己清理无用数据给其他数据清理空间
JavaScript 引擎中有一个后台进程称为垃圾回收器，它监视所有对象，并删除那些不可访问的对象。
一般来说没有被引用的对象就是垃圾，就是要被清除， 有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。

// WeakMap 对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的。  
// 原生的 WeakMap 持有的是每个键对象的“弱引用”，不影响js垃圾回收机制。  
const targetMap = new WeakMap()  
  
let product = { price: 5, quantity: 2 }  
let total = 0  
let storage = { amount: 50, sale: 2 }  
let remain = 48  
  
let effect = () => {  
  total = product.price * product.quantity  
  remain = storage.amount - storage.sale  
}  
  
function track(target, key) {  
  let depsMap = targetMap.get(target)  
  if (!depsMap) {  
    targetMap.set(target, (depsMap = new Map()))  
  }  
  let dep = depsMap.get(key)  
  if (!dep) {  
    depsMap.set(key, (dep = new Set()))  
  }  
  dep.add(effect)  
}  
function trigger(target, key) {  
  let depsMap = targetMap.get(target)  
  if (!depsMap) return  
  let dep = depsMap.get(key)  
  if (dep) {  
    dep.forEach(effect => effect())  
  }  
}  
  
track(product, 'price')  
track(storage, 'sale')  
effect()  
  
// 运行  
> total  
10  
> remain  
48  
> product.price = 8  
8  
> storage.sale = 5  
5  
> total  
10  
> remain  
48  
> trigger(product, 'price')  
undefined  
> trigger(storage, 'sale')  
undefined  
> total  
16  
> remain  
45

现在我们有了一套可以记录多个对象并根据对象变化追踪更新的机制，只要再加上自动记录以及自动触发更新就可以完善功能了

3.对象代理Proxy

  • 步骤一: Proxy和Reflect

tips:
1.Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers的方法相同。
Reflect对象有4个意义：
从Reflect对象上可以拿到语言内部的方法。
操作对象出现报错时返回false
让操作对象都变为函数式编程
保持和proxy对象的方法一一对象
2.Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

let product = { price: 5, quantity: 2 }  
  
let proxiedProduct = new Proxy(product, {  
  get(target, key, receiver) {  
    console.log('get')  
    // return target[key]  
    // 注意我们的get有一个额外的参数receiver，我们将它作为参数发送到Reflect.get中。这确保了当我们的对象从另一个对象继承了值/函数时，可以使用正确的this。这就是为什么我们总是在代理内部使用Reflect。  
    return Reflect.get(target, key, receiver)  
  },  
  set(target, key, value, receiver) {  
    console.log('set')  
    return Reflect.set(target, key, value, receiver)  
  }  
})  
  
// 运行  
> proxiedProduct.price = 8  
set  
< 8  
> proxiedProduct.price  
get  
< 8
  • 步骤二: 进一步封装
const targetMap = new WeakMap()  
  
function track(target, key) {  
  let depsMap = targetMap.get(target)  
  if (!depsMap) {  
    targetMap.set(target, (depsMap = new Map()))  
  }  
  let dep = depsMap.get(key)  
  if (!dep) {  
    depsMap.set(key, (dep = new Set()))  
  }  
  dep.add(effect)  
}  
function trigger(target, key) {  
  let depsMap = targetMap.get(target)  
  if (!depsMap) return  
  let dep = depsMap.get(key)  
  if (dep) {  
    dep.forEach(effect => effect())  
  }  
}  
  
function reactive(target) {  
  const handler = {  
    get(target, key, receiver) {  
      let result = Reflect.get(target, key, receiver)  
      track(target, key)  
      return typeof result === 'object' ? reactive(result) : result  
    },  
    set(target, key, value, receiver) {  
      let oldValue = target[key]  
      let result = Reflect.set(target, key, value, receiver)  
      if (oldValue !== value) {  
        trigger(target, key)  
      }  
      return result  
    }  
  }  
  return new Proxy(target, handler)  
}  
  
  
let product = reactive({ price: 5, quantity: {a: 2} })  
let total = 0  
let effect = () => {  
  total = product.price * product.quantity.a  
}  
  
effect()  
  
// 运行  
> total  
< 10
> product.price = 8
< 8
> total 
< 16
  • 步骤三: 移除非effect下的track,封装ref
let activeEffect = null  
  
function track(target, key) {  
  // 新增判断activeEffect，不是每次get都要track  
  if (activeEffect) {  
    let depsMap = targetMap.get(target)  
    if (!depsMap) {  
      targetMap.set(target, (depsMap = new Map()))  
    }  
    let dep = depsMap.get(key)  
    if (!dep) {  
      depsMap.set(key, (dep = new Set()))  
    }  
    dep.add(activeEffect)  
  }  
}  
// effect函数  
function effect(eff) {  
  activeEffect = eff  
  activeEffect()  
  activeEffect = null  
}  
  
function ref(raw) {  
  const r = {  
    get value() {  
      track(r, 'value')  
      return raw  
    },  
    set value(newValue) {  
      if (raw !== newValue) {  
        raw = newValue  
        trigger(r, 'value')  
      }  
    }  
  }  
  return r  
}  
  
let product = reactive({ price: 5, quantity: 2 })  
let salePrice = ref(0)  
let total = 0  
  
effect(() => {  
  total = salePrice.value * product.quantity  
})  
effect(() => {  
  salePrice.value = product.price * 0.9  
})
  • 步骤四: 封装computed
function computed(getterOrOptions) {  
  let getter  
  let setter  
  if (typeof getterOrOptions === 'function') {  
    getter = getterOrOptions  
    setter = () => {  
      console.warn('Write operation failed: computed value is readonly')  
    }  
  } else {  
    getter = getterOrOptions.get  
    setter = getterOrOptions.set  
  }  
  return {  
    get value() {  
      let result = ref()  
      effect(() => {result.value = getter()})  
      return result.value  
    },  
    set value(newValue) {  
      setter(newValue)  
    }  
  }  
}  
  
let product = reactive({ price: 5, quantity: 2 })  
let salePrice = computed({  
  get() {  
    return product.price * 0.9  
  },  
  set(val) {  
    product.price = val / 0.9  
  }  
})  
let total = computed(() => {  
  return salePrice.value * product.quantity  
})

这样我们就封装好了vue3的三种基础的响应性API (reactive,ref,computed)，其他的响应性API都是基于此做的二次封装，了解了原理我们就能更好的使用这些Api

星如雨ｸﾞｯ!(๑•̀ㅂ•́)و✧
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3设计原理浅析
weixin_30230009的博客
05-29 601
本文尝试解答如下问题：前端框架为何而来？虚拟DOM到底怎么样？Vue3为何如此设计？前端框架历史HTML、CSS、JS三件套时代在30年前，互联网刚出现时，多数网页都是静态页，主要功能就是展示信息，而前端大部分工作就是让写写HTML+CSS，将内容合理、美观的展示出来，此时前端工作简单，也没有明确的前端工作师这一岗位。随着后端的发展，后端提出了MVC（Model、View...
【Vue3】4个比较重要的设计模式！！
最新发布
CodeQi技术小栈的博客
07-16 1101
在我投身于前端开发的职业生涯期间，曾有一次承接了一个大型项目的维护工作。此项目运用的是 Vue 框架，然而其代码结构紊乱不堪，可维护性极度糟糕😫。由此，我开启了对 Vue 设计模式的深度研究之旅，期望能够提升自身的开发水准，让代码更具优雅性、高效性以及良好的可维护性💪。所以，今天给大佬们分享我认为4个vue中比较重要的设计模式！
vue3中，使用23种设计模式
hkduan的博客
11-09 1178
适配器模式：使用Vue3的provide和inject来实现适配器模式。适配器模式：使用Vue3的provide和inject来实现适配器模式。迭代器模式：使用Vue3的for…代理模式：使用Vue3的proxy对象来实现数据的代理。代理模式：使用Vue3的proxy对象来实现代理模式。责任链模式：使用Vue3的事件总线来实现责任链模式。建造者模式：使用Vue3的组件选项来实现建造者模式。责任链模式：使用Vue3的事件总线来实现责任链模式。建造者模式：使用Vue3的组件选项来实现建造者模式。
3.VUE的MVVM设计模式
yangwq的博客
08-11 446
标签指令：v-for <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TodoList</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body>
Vue3响应式设计细节与实现原理（一）
lyh6665的博客
03-21 607
vue3响应式原理解析
硬核Vue3响应式原理解析，为你保驾护航渡过寒冬
Talljack 的博客园
11-18 774
我知道学习vue3源码比较困难，所以在这里写了抽取了一个vue3响应式原理的核心代码，写成一个小demo，硬核代码，希望对你有帮助
通过图带你深入了解vue的响应式原理
10-16
Vue.js是一个流行的前端JavaScript框架，其核心特点之一就是其响应式系统。这个系统的目的是使得...了解这些关键知识点后，我们就能够理解Vue响应式系统的工作原理，并更好地利用Vue来开发高效且响应式的前端应用。
Vue设计模式，发布订阅，响应式原理（简略版）
Mr_Ypp的博客
09-14 572
Mvvm模式，响应式原理，发布订阅模式，简单概述
Vue 响应式实现原理深入浅出
小王的技术库
09-30 2369
vue 是一个易上手的框架，许多便捷功能都在其内部做了集成，其中最有区别性的功能就是其潜藏于底层的响应式系统。组件状态都是响应式的 JavaScript 对象。当更改它们时，视图会随即更新，这让状态管理更加简单直观。那么，Vue 响应性系统是如何实现的呢？本文也是在阅读了 Vue 源码后的理解以及模仿实现，所以跟随作者的思路，我们一起由浅入深的探索一下vue吧！本文 Vue 源码版本：2.6.14，为了便于理解，代码都最简化。方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
设计模式在vue中的应用（三）
weixin_34220623的博客
01-27 721
前言 目录整理： 设计模式在vue中的应用（一） 设计模式在vue中的应用（二） 设计模式在vue中的应用（三） 设计模式在vue中的应用（四） 设计模式在vue中的应用（五） 设计模式在vue中的应用（六） 为什么要写这些文章呢。正如设计模式（Design Pattern）是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结（来自百度百科）一样，也是想通过分享一些工作中的积累与大家探讨...
Vue 设计模式
热爱可抵岁月漫长
06-04 1802
单例模式 （Singleton Pattern）又称为单体模式，保证一个类只有一个实例，并提供一个访问它的全局访问点。也就是说，第二次使用同一个类创建新对象的时候，应该得到与第一次创建的对象完全相同的对象。
vue.js 3设计与实现 -- Vue.js 3 的设计思路
qq_36973122的博客
02-09 957
vue.js 3设计与实现 -- Vue.js 3 的设计思路
【Vue3】通过实例，理解 Vue3 的响应式设计
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
07-08 1923
响应式指的是变量（如：数组、字符串、数字、对象等）在其值或它引用的任何其他变量在声明后发生更改时更新的能力。在本文中，我们将研究 Vue 中的响应式设计，它是如何工作的，以及我们如何使用新创建的方法和函数来创建响应式变量。默认情况下，JavaScript 不是响应式的。 这意味着如果我们创建变量 boy 并在应用程序的 A 部分中引用它，然后在 B 部分继续修改 boy，A 部分将不会更新为boy 的新值。 上面的代码片段是 JavaScript 非响应式特性的经典示例——因此，为什么更改没有反映在 sen
vue3的设计思路（1）声明式地描述 UI
陈开心的博客
10-25 710
Vue.js 3 是一个声明式的 UI 框架，意思是说用户在使用 Vue.js 3 开发页面时是声明式地描述 UI 的。思考一下，如果让你设计一个声明式的 UI 框架，你会怎么设计呢？
01-vue3的设计思想、理念和整体架构
weixin_43245037的博客
07-14 1450
vue3的设计思想和理念
浅谈Vue项目中用到的设计模式
Model_yc的博客
10-20 4799
的原则是找出程序中的变化，并将变化封装起来，实现高效的可复用性。核心在于意图，而不在结构。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、 可维护性、灵活性。我们使用设计模式的最终目的是为了实现代码的。
深入理解vue核心设计模式
qq_37195804的博客
07-15 2238
从今天听了大圣老师的课，感觉vue2到vue3的整体设计思路上还是没有变化的，依旧是通过建立一个被观察的对象，通过get方法收集依赖，set方法派发的方式去建立核心的“响应式”。 这个设计模式我也看过不少文章，被称为订阅-发布设计模式确实更合理，在vue2的架构中，我们把核心的设计模式分为Observer，Dep，Watcher，Observer被称为观察者，观察着我们的数据，Dep为数据分配中心，收集数据和通知数据更新，Watcher作为订阅者，收集每个被订阅的对象，就比如我们vue中常见的{{value
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值