Vue2和Vue3 数据响应式原理

已于 2022-08-01 18:55:26 修改
阅读量2.2k 收藏 20
点赞数
分类专栏： Vue/React 文章标签： vue.js javascript 前端
于 2022-05-03 16:18:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41370833/article/details/124445229
版权

文章目录

Vue 数据响应式原理

面试题

  • 响应式原理
  • 为什么vue3的proxy会比vue2的Object.defineProperty要快
  • vue2和vue3响应式的区别
  • Object.defineProperty 与 Proxy 的区别、优缺点
  • Proxy可以拦截哪些方法
  • 为什么proxy要结合reflect进行修改
  • Reflect是什么， 都有哪些静态方法
  • 观察者模式和发布订阅模式的区别
  • 手写发布订阅机制

为什么vue3响应式优于vue2响应式

  • Vue2的响应式是基于Object.defineProperty实现的
  • Vue3的响应式是基于ES6的Proxy+Reflect来实现的

vue2中存在的问题

  • 需要对每个属性进行遍历监听，如果嵌套对象，需要深层监听，造成性能问题
  • 对象的新增属性、删除属性、界面不会更新
    vue2的解决方法: 通过vm.$set(obj,key.val)/vm.$delete(obj,key)新增属性/删除属性
  • 直接通过下标修改数组,界面不会自动更新
    vue2的解决方法:vm.$set(arr,index.value),调用数组的splice方法

vue3中的优化
vue2是监听对象的属性，vue3是监听对象

  • 不需要一次性遍历data的属性，可以显著提高性能。需要的时候再进行深度监听。
  • 基于Proxy，对被代理对象设置拦截，访问或操作被代理对象都要先通过拦截。所以可以监听对象属性的添加和删除。
  • 可以原生监听数组，不需要通过重写方法来实现对数组的监控。

关于惰性深度监听的笔记:https://juejin.cn/post/6979368550225936392#heading-4

Object.defineProperty()和Proxy构造函数

Proxy可以创建一个代理对象，实现对其他对象的代理。外界对被代理对象进行的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
Proxy是一个构造函数,第一个参数是被代理对象,第二个参数是一个对象，里面存放拦截的操作。

const p = new Proxy(obj,{
	get(){},
	set(){}
})

Proxy可以拦截哪些方法?
proxy只能拦截一个对象的基本操作

  • 读取操作,访问属性比如proxy.foo或proxy['foo'] : get(被代理对象, 读取的属性, [简单理解为this,谁在读取属性])
  • 读取操作,判断对象或原型上是否存在给定的key，比如key in obj :has(被代理对象, 判断的属性)
  • 读取操作,ownKeys(被代理对象)方法用来拦截对象自身属性的读取操作。
    • Object.getOwnPropertyNames()
    • Object.getOwnPropertySymbols()
    • Object.keys()
    • for...in循环
  • 设置操作,设置属性的值proxy.foo = v或proxy['foo'] = v: get(被代理对象, 设置的属性, [简单理解为this,谁在设置属性])
  • 调用操作 、call和apply操作: apply(被代理对象,被代理对象的上下文(this),目标对象的参数数组)
  • …(具体13种方法)

Reflect有哪些静态方法
Proxy和Reflect的方法都是一一对应的，代码会更易读。

常用方法

  • Reflect.get(): 获取对象身上某个属性的值，类似于 target[name]。
  • Reflect.set(): 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。
  • Reflect.has(): 判断一个对象是否存在某个属性，和 in 运算符 的功能完全相同。
  • Reflect.deleteProperty(): 作为函数的delete操作符，相当于执行 delete target[name]。
为什么要使用Reflect

1.修改某些 Object 方法的返回结果，让语义变的更加规范化
比如使用Proxy代理对象obj,当通过代理对象修改obj上的不可修改属性时，会抛出错误阻塞后面的代码。使用Reflect.set返回false，代码正常执行

//1.假设对象中的name属性不允许修改
const obj = {}
Object.defineProperty(obj,"name",{
    value:"name",
    writable: false
})
//2.通过Proxy代理该对象之后，对obj的name属性就行修改会抛出错误，阻塞后面代码的执行
const proxy = new Proxy(obj, {
    get(target, key,) {
        // 注意，这里我们没有使用 Reflect 来进行读取
        return target[key]
    },
    set(target, key, value) {
        // 注意，这里同样没有使用 Reflect 来进行设置
        return target[key] = value
    }
})
proxy.name = '王五'
console.log('阻塞了')
  1. Reflect 中的 receiver 参数可以理解为函数调用过程中的this代表谁读取了属性 可以解决 访问器属性中的 this 的指向导致无法触发响应式的问题
    Reflect.get(target, key, receiver) 类似于 Reflect.get(target, key).call(receiver) 改变 this 的指向。
    访问器属性中的 this 的指向问题
const obj = {
    name: 'raman',
    get value() {
        console.log('value 中的 this：', this, this === obj)
        return this.name
    }
}
obj.value; //name

const proxy = new Proxy(obj, {
    get(target, key) {
        return target[key];
    }   
})
effect(()=>{console.log(proxy.value));
//通过代理proxy.value访问时，先触发get返回obj.value,触发访问器，此时访问器中this指向的obj
/*
这里的this指向obj,obj对象是一个原始数据，并不是响应式对象,所以将无法和副作用函数建立联系。
effect(()=>{console.log(obj.value));
*/

Vue2 响应式原理

对象的响应式原理

完整流程图

在这里插入图片描述
编译模板–编译模板过程
绑定响应式: Object.defineProperty + 观察者模式
数据改变时更新视图–触发diff-patch过程

过程详述

总结

  1. 循环给一个数据内的所有属性(包括子属性)通过 Object.defineProperty函数都转换成getter/setter形式。
  2. 为每个属性绑定一个dep对象,dep用来收集数据的依赖也就是watcher对象。在get的时候，将依赖存进dep中，在set数据改变的时候，通知dep中的依赖数据发生改变了。
  3. 所以在watcher对象中观察数据的变化，当数据变化时通过dep通知(notify)watcher数据改变，触发watcher对象的更新函数->更新视图-触发diff-patch过程。

问题1：数据被修改后，Vue内部如何监听message数据的改变的？ --> Object.defineProperty -> 监听对象属性的改变
问题2：当数据发生改变，Vue如何知道需要通知哪些地方更新界面？ -->观察者模式

  1. Object.defineProperty -> 监听对象属性的改变
    defineReactive函数定义一个响应式数据
function defineReactive(data,key,val){
	Objcet.defineProperty(data,key,{//代码①
		enumerable:true,
		configurable:true,
		get:function(){
			return val;
		},
		set:function(){
			if(val===newVal)return;
			val = newVal;
		}
	})
}
  1. 定义Observer类将一个正常的object转换成被侦测的object，循环给一个数据内的所有属性(包括子属性)都转换成getter/setter形式。
//{a:"x",b:{c:"y",d:"z"}}
//Observer类的作用将正常的object转换为被侦测的object
class Observer{
	constructor(data){
		this.data = data;
		if(!Array.isArray(data)){ //这里数组和对象都会进来，只处理对象
			Object.keys(data).forEach(key=>{
			defineReactive(this.data,key,data[key]);
			})
		}	
	}
}
function defineReactive(data,key,val){
	//如果val是对象，比如b:{c:"y",d:"z"},说明不是最里层，还需要对{c:"y",d:"z"}进行转换getter/setter
	if(typeof val === 'object')new Observer(val);//递归的目的是每一层的属性都应该被绑定响应式
	//..代码①
}
  1. 现在对数据绑定了监听，但是当数据发生变化时，我们通知谁？我们怎么知道那些地方使用了这个数据？
    对于模板来说使用了name数据,也就是调用了name.get()方法，所以我们可以在get方法中存储用到了name属性的地方，叫做name属性的依赖。
<template>
	{{name}}
</template>

定义Dep类，Dep类的目的是对依赖进行管理，比如存储依赖，删除依赖、给依赖发更新通知等等，那么Dep类与某数据的关系应该是一一对应，所以我们在绑定响应式时，可以为每个属性绑定一个dep对象。在get的时候，将使用了name的地方(依赖)存进dep中，在set数据改变的时候，通知dep中的依赖数据发生改变了，Object在getter中收集依赖，在stter中触发依赖

class Dep {//Dep类存储依赖，添加依赖， 删除依赖，通知依赖等
	constructor(){
		this.subs = [];//subs存储依赖
	}
	addSub(sub){
		this.subs.push(sub);
	}
	depend(){
		//if(依赖){
		//	this.addSub(依赖);
		//}
		if(window.target){
			this.addSub(window.target);
		}
	}
	notify(){
		this.subs.forEach(sub =>{
			sub.update(); //通知这个属性的所有依赖数据更新
		})
	}
}
function defineReactive(data,key,val){
	if(typeof val === 'object')new Observer(val);
	let dep = new Dep(); //绑定dep对象
	Objcet.defineProperty(data,key,{
		enumerable:true,
		configurable:true,
		get:function(){
			dep.depend();//修改dep对象，这里应该添加依赖
			return val;
		},
		set:function(){
			if(val===newVal)return;
			val = newVal;
			dep.notify();//通知依赖，数据发生了修改
		}
	})
}
  1. 依赖是什么？之前我们把使用了数据的地方，叫做依赖，那么依赖描述成数据结构应该是什么样子的？
    定义一个Watcher类，一个Watcher对象就是一个依赖
    当属性变化时，就会调用dep的notify属性循环通知watcher调用update(）方法，修改模板中的数据。
class Watcher{
	constructor(vm,name,node){
		this.node = node;
		this.vm = vm;
		this.name = name;
		window.target = this, //我们给依赖命名为window.target = watcher对象，所以依赖就是watcher对象
		this.update();
		window.target = null; //并没有绑定在实例上，全局仅有一个，数据更新后会重新调用get，防止一个watcher对象被多次加入dep.sub数组中
	}
	update(){//将{{name}}的name更新为vm里面的值，这里是在vm上代理了_data的值
		this.node.nodeValue = this.vm[this.name]; 
		//从vm中取某个属性，相当于调用该属性的getter方法,此时window.target是有值的，值为watcher对象，所以这个watcher对象会被存储进dep.sub数组里面
	}
}
//watcher对象在解析模板中的指令的时候会被创建new Watcher

Vue2 数组响应式原理

重写了数组的七个方法，这7个方法都会改变原数组

  • push:向数组的结尾添加一个或多个元素
  • pop:从数组的结尾删除一个元素
  • unshift:向数组的开头添加一个或多个元素
  • shift:删除数组的第一个元素
  • splice:删除数组中的指定元素，并为数组添加新元素
  • sort:数组元素进行排序
  • reverse:反转数组

思路

  1. 定义一个拦截器对象，拦截器对象的__proto__隐式原型指向Array.prototype，拦截器对象重写上述的7个方法，重写的目的是增加响应式，但是最终调用的函数原型上的方法
  2. 为数组增加响应式的办法:让数组的__proto__隐式原型指向拦截器对象的显式原型
  3. 数组是在getter中收集依赖，在拦截器中触发依赖。数组中元素的修改是通过拦截器重写的方法，那么如果触发了重写方法说明数据改变了，此时我们就需要通知依赖，所以是在拦截器中触发依赖。
    在这里插入图片描述
过程详述
  1. 我们需要创建拦截器对象，重写这7个方法，重写的目的是增加响应式，但是最终调用的函数原型上的方法
    比如调用push方法时，实际调用的时arrayMethods.push，也就是mutator函数，最终调用的是原型上的push方法 --> 加一层mutator的目的是可以在mutator函数做一些其他事情，比如通知依赖
const arrayProto = Array.prototype;
export const arrayMethods = Object.create(arrayProto); //arrayMethods.__proto__ = Array.prototype

const methodsNeedChange = ['push','pop','shift','unshift','splice','sort','reverse']; //需要被改写的七个方法
methodsNeedChange.forEach(function(method){
	const original= arrayProto[method]; //缓存原来的方法，最终还是会被调用
	Object.defineProperty(arrayMethods, method, {//为拦截器对象增加7个方法
		//value:重写的方法
		value:function mutator(...args){
			return original.apply(this,args); //最终调用的是原型的方法,this指向拦截器
		}
		enumerable:false;//不可以被枚举
		writable:true; //可以被遍历
		configurable:true; //可以被删除
	})
	 
}
  1. 我们现在要为数组增加响应式，方法是让数组的__proto__隐式原型指向拦截器对象，Observer类的作用就是增加响应式。
//引入arrayMethods
class Observer{
	constructor(data){
		this.data = data;
		if(Array.isArray(data)){//为数组增加响应式
			data.__proto__ = arrayMethods;
		}
		else{ //为对象增加响应式
			Object.keys(data).forEach(key=>{
			defineReactive(this.data,key,data[key]);
			})
		}	
	}
}

注意:有些浏览器不支持__proto__，如果不支持，Vue直接把arrayMethods身上的改写方法设置到被侦测的数组上

  1. 还是需要考虑一个问题，数组改变了去通知谁？如何收集依赖？在哪里触发依赖？
    需要注意的一个问题是data是一个对象，如果有数组也是存在对象中的，所以数组是在getter中收集依赖，在拦截器中触发依赖。
    数组中元素的修改时通过拦截器重写的方法，那么如果触发了重写方法说明数据改变了，此时我们就需要通知依赖，所以是在拦截器中触发依赖。

  2. 拦截器怎么能看见依赖？我们要把依赖放在哪里？
    object是一个属性对应一个Dep数组，所以写在了defineReactive函数中，因为需要在getter中收集依赖，在setter中触发依赖，在getter、setter的时候需要看得见依赖。
    同理，我们需要把依赖保存在getter和拦截器都能看见依赖的地方，也就是Observer实例中。
    因为在getter中可以访问到Observer实例，在拦截器中也可以访问到Observer实例(这个地方在后面讲，先认定这个结论)

//引入arrayMethods
class Observer{
	constructor(data){
		//....
		this.dep = new Dep();//在Observer实例上新增dep
		if(Array.isArray(data)){//为数组增加响应式
			data.__proto__ = arrayMethods;
		}
		else{ //为对象增加响应式
			//....
		}	
	}
}

怎么在拦截器中访问到Oberver实例？给数组增加一个属性__ob__,这个__ob__指向Oberver实例

//工具函数给obj身上的key添加val
function def(obj,key,val,enumerable){
	Object.defineProperty(obj,key,{
		value:val,
		enumerable:!!enumerable,
		writeable:true,
		configurable:true
	})
}
class Observer{
	constructor(data){
		//....
		this.dep = new Dep();//在Observer实例上新增dep
		def(data,'__ob__',this); //拦截器可以通过数组身上的__ob__属性访问到Observer实例
		if(Array.isArray(data)){//为数组增加响应式
			data.__proto__ = arrayMethods;
		}
		else{ //为对象增加响应式
			//....
		}	
	}
}

现在我们在可以在拦截器里看见依赖了，也就是通过数组身上的__ob__属性，那么我们就可以在拦截器中通知依赖，告诉Watcher数据变啦。

[...].forEach(function(method){
	const original = arrayProto[method];//缓存Array原型上的方法
	def(arrayMethods,method,function mutator(...args){
		const result = original.apply(this,args);//this指向拦截器
		this.__ob__.dep.notify(); //向依赖发送数据！！！
		return result;
	})
})
  1. 在getter收集依赖，添加到observer实例的dep实例中
function defineReactive(data,key,val){
	//if(typeof val === 'object')new Observer(val);
	let childOb = observe(val); //上面的判断也会在这个函数中判断
	let dep = new Dep(); //绑定dep对象
	Objcet.defineProperty(data,key,{
		enumerable:true,
		configurable:true,
		get:function(){
			dep.depend();//对象的依赖收集
			if(childOb){
				childOb.dep.depend(); //数组的依赖收集，收集在observer实例的Dep上
			}
			return val;
		},
		set:function(){
			if(val===newVal)return;
			val = newVal;
			dep.notify();//通知依赖，数据发生了修改
		}
	})
}
export function observe (value){ //observe函数:为数组和对象返回observe实例
	if(!isObject(value))return;
	let ob
	if(hasOwn(value,'__ob__') && value.__ob___ instanceof Observer){//如果该数组已经有了__ob__，已经创建了observer实例，已经是响应式的了
		ob = value.__ob__;
	}else{ //数组没有observer实例 或者是对象则会创建observer实例
		ob = new Observer(value);
	}
	return ob;
}

__ob__的作用
1.让拦截器可以访问到observer实例:通过将observer实例绑定在数组的__ob__属性上
2.用来标识当前value是否已经被Observer类转化为响应式数据

  1. 如果数组里面套对象怎么办？侦察Array中的每一项
class Observer{
	constructor(data){
		//...
		if(Array.isArray(value)){
			this.observeArray(value); //侦察Array中的每一项
			//...
		}
		}
		//....
		observeArray(items){//循环侦察Array中的每一项
			for(let i=0,l=items.length;i<1;i++){
				observe(items[i]);//observe函数:为数组和对象返回observe实例
			}
		
	}
  1. 还有一点是如果push、unshift、splice新增数组元素进来，那么对于新增的元素我们也需要用Observe来侦测，让其变为响应式的。具体实现是把新增元素取出来，调用数组身上的observer实例的observeArray方法
对象和数组响应式原理的对比与整理

在哪里收集依赖在哪里通知依赖？

  • 对象:在getter中收集依赖，在setter中触发依赖
  • 数组:在getter中收集依赖，在拦截器对象中触发依赖

哪里创建Dep实例
在收集依赖的地方和触发依赖的地方都能看见

  • 对象:在defineReactive函数里创建Dep实例，每一个属性对应一个Dep实例
  • 数组:在Observer类里给Observer实例绑定Dep实例，每一个observer实例对应一个Dep实例

Observer类:侦察对象和数组的变化
主要目的:为数组和对象增加响应式
思路
1.为数组准备好Dep实例和为数组添加__ob__属性，该属性指向Observer实例，每一个数组都会绑定一个observer实例

__ob__的作用
1.让拦截器可以访问到observer实例:通过将observer实例绑定在数组的__ob__属性上
2.用来标识当前value是否已经被Observer类转化为响应式数据

2.循环侦察Array中的每一项，让数组的隐式原型指向拦截器对象

observeArray方法：循环侦察Array中的每一项,数组中的每一项调用observe函数
observe函数:为数组和对象返回observe实例

3.循环将对象中的每一个属性都转化为getter/setter模式

defineReactive：将对象的每一个属性转化为getter/setter,为对象的 对象的每一个属性对应一个Dep实例，对象的Dep实例在这个函数中创建。在getter收集依赖，在setter中触发依赖通知Dep
数组在getter中通过observer实例的Dep实例收集依赖

//工具函数给obj身上的key添加val
function def(obj,key,val,enumerable){
	Object.defineProperty(obj,key,{
		value:val,
		enumerable:!!enumerable,
		writeable:true,
		configurable:true
	})
}
class Observer{
	constructor(data){
		this.dep = new Dep();//在Observer实例上新增dep
		def(data,'__ob__',this); //为数组绑定observer实例
		if(Array.isArray(value)){//处理数组
			this.observeArray(value); //侦察Array中的每一项
			data.__proto__ = arrayMethods; //让数组的隐式原型指向拦截器对象
		}
		else{ //处理对象
			Object.keys(data).forEach(key=>{//循环将每一个属性转化为getter/setter
				defineReactive(this.data,key,data[key]);
			})
		}
    }
    observeArray(items){//循环侦察Array中的每一项
		for(let i=0,l=items.length;i<1;i++){
			observe(items[i]);//observe函数:为数组和对象返回observe实例
		}
}
function defineReactive(data,key,val){
		let childOb = observe(val); //返回observe实例
	    let dep = new Dep(); //绑定dep对象
		Objcet.defineProperty(data,key,{
			enumerable:true,
			configurable:true,
			get:function(){
				dep.depend();//对象的依赖收集
			if(childOb){
				childOb.dep.depend(); //数组的依赖收集，收集在observer实例的Dep上
			}
			return val;
		},
		set:function(){
			if(val===newVal)return;
			val = newVal;
			dep.notify();//通知依赖，数据发生了修改
		}
	})
}
}
export function observe (value){ //observe函数:为数组和对象返回observe实例
	if(!isObject(value))return;
	let ob
	if(hasOwn(value,'__ob__') && value.__ob___ instanceof Observer){//如果该数组已经有了__ob__，已经创建了observer实例，已经是响应式的了
		ob = value.__ob__;
	}else{ //数组没有observer实例 或者是对象则会创建observer实例
		ob = new Observer(value);
	}
	return ob;
}

数组专有：拦截器:重写七个方法，使其加入响应式

拦截器的作用
1.拦截数组的七个方法,将拦截器的__proto__隐式原型指向Array.prototype显式原型
2.通知依赖数据改变了，通过调用数组绑定的observer对象找到observer对象绑定的dep实例通知依赖

const arrayProto = Array.prototype;
export const arrayMethods = Object.create(arrayProto); //arrayMethods.__proto__ = Array.prototype

const methodsNeedChange = ['push','pop','shift','unshift','splice','sort','reverse']; //需要被改写的七个方法
methodsNeedChange.forEach(function(method){
	const original= arrayProto[method]; //缓存原来的方法，最终还是会被调用
	def(arrayMethods,method,function mutator(...args){
		const result = original.apply(this,args);//this指向拦截器，调用原型的方法
		this.__ob__.dep.notify(); //向依赖发送数据！！！
		return result;
	})
}

共有 Dep类:对依赖进行管理 没有对数组和对象分别处理

1.使用数据的时候收集依赖
2.通知依赖数据发生变化
3.对依赖进行管理，比如增加依赖、删除依赖、通知依赖等
Dep实例和数据的关系是一一对应的

class Dep {//Dep类存储依赖，添加依赖， 删除依赖，通知依赖等
	constructor(){
		this.subs = [];//subs存储依赖
	}
	addSub(sub){
		this.subs.push(sub);
	}
	depend(){
		if(window.target){
			this.addSub(window.target);
		}
	}
	notify(){
		this.subs.forEach(sub =>{
			sub.update(); //通知这个属性的所有依赖数据更新
		})
	}
}

共有 Watcher类:依赖 没有对数组和对象分别处理

中介，数据发生改变通知外界。外界通过Watcher类读取数据
当模板解析时会创建Watcher实例，此时调用update方法，从vm中取某个属性，相当于调用该属性的getter方法,此时window.target是有值的，值为watcher对象，所以这个watcher对象会被存储进dep.sub数组里面
Dep类通知依赖时也会调用update方法

export class Watcher{
	constructor(vm,name,node){
		this.node = node;
		this.vm = vm;
		this.name = name;
		window.target = this, //我们给依赖命名为window.target， = watcher对象，所以依赖就是watcher对象
		this.update();
		window.target = null; //并没有绑定在实例上，全局仅有一个，数据更新后会重新调用get，防止一个watcher对象被多次加入dep.sub数组中
	}
	update(){//将{{name}}的name更新为vm里面的值，这里是在vm上代理了_data的值
		this.node.nodeValue = this.vm[this.name]; 
		//从vm中取某个属性，相当于调用该属性的getter方法,此时window.target是有值的，值为watcher对象，所以这个watcher对象会被存储进dep.sub数组里面
	}
}
//watcher对象在解析模板中的指令的时候会被创建new Watcher

主要的实现方式描述/总结

  • 对象
    new Vue()首先执行初始化，数据传给Observer类，该类的作用是把一个object中的所有属性(包括子属性)都转换成响应式的，它利用defineProperty方法，为对象中的每个属性绑定getter和setter方法以及dep实例，dep实例和属性一一对应，它的作用是对该属性的依赖进行管理，比如·在getter方法里收集依赖，在setter方法里触发依赖，利用dep通知watcher数据发生改变，watcher再通知界面数据发生改变（数据变化之后，通过patch方法来进行视图渲染）
    在这里插入图片描述
  • 数组:加入拦截器
    修改该数组的隐式原型__proto__指向拦截器的显式原型，拦截器对象的隐式原型__proto__指向Array.prototype，在拦截器中拦截数组中的七个方法，进行一些处理后，再调用Array.prototype上的对应方法。这样调用数组中的七个方法会先调用拦截器中重写的方法，调用重写方法时说明数组发生了变化，在重写方法中会通知该数组oberver实例上dep数据修改了，dep通知依赖(watcher)数据修改了，最后watcher通知界面数据修改了。依赖的收集是在getter中进行的,依赖的触发在拦截器中进行的。
    在这里插入图片描述

vue3响应式原理

质上是通过 Proxy 劫持了数据对象的读写，当我们访问数据时，会触发 getter 执行依赖收集；修改数据时，会触发 setter 派发通知。

  1. 副作用函数effect() ，effect的执行会直接或间接影响其他函数的执行。
//当obj发生变化时，effect函数自动重新执行，我们就称obj是响应式的
const obj = {text:'xxx'}
function effect(){
	console.log(obj.text);
}
//手动执行
obj.text = 'yyy'
effect()
  1. 通过 track函数 + trigger函数实现依赖的收集和触发，实现当数据更新时，他的依赖变量也跟着改变
    track函数:track函数收集依赖，对象的每个属性都有自己的dep，将所有依赖于该属性的**effect函数**都收集起来，放在dep里。
    trigger函数: trigger函数通知依赖。将依赖搜集起来之后，只要变量一改变，就执行trigger函数通知dep里所有依赖该变量的effect函数执行，实现依赖变量的更新。

1.对象的每个属性都有自己的dep，将所有依赖于该属性的**effect函数**都收集起来，放在dep里。
2.每个对象会建立一个Map来存储各个属性和dep的对应关系，key为属性名，value为该属性的dep(使用Set来存储)。
3.使用WeakMap来存储多个对象的Map

在这里插入图片描述

  1. Proxy-Reflect实现自动收集和触发依赖track-trigger函数
//reactive 将对象变成响应式的
function reactive(target) {
    const handler = {
        get(target, key, receiver) {
            track(receiver, key) // 访问时收集依赖
            return Reflect.get(target, key, receiver)
        },
        set(target, key, value, receiver) {
            Reflect.set(target, key, value, receiver)
            trigger(receiver, key) // 设值时自动通知更新
        }
    }

    return new Proxy(target, handler)
}

响应式代码

function reactive(target = {}) {
  if (typeof target !== "object" || target == null) {
    return target
  }

  // 代理配置
  const proxyConf = {
    get(target, key, receiver) {
      //只监听对象本身（非原型）属性
      const ownKeys = Reflect.ownKeys(target)
      if (ownKeys.includes(key)) {
        //如果是本身的属性就监听，如果是对象原型的属性就不监听
        console.log("get", key)
      }
        
      const result = Reflect.get(target, key, receiver)
      //(惰性)深度监听-->提升性能
      return reactive(result)
    },
    set(target, key, val, receiver) {
      // 重复的数据不处理
      if (val === target[key]) {
        return true
      }

      // 监听是否是新增的key
      const ownKeys = Reflect.ownKeys(target)
      if (ownKeys.includes(key)) {
        console.log("已有的key", key)
      } else {
        console.log("新增的key", key)
      }

      const result = Reflect.set(target, key, val, receiver)
      return result //通过return的值可以看出是否设置成功
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key)
      console.log("delete property", key)
      return result //是否删除成功
    },
  }

  // 生成代理对象
  const observed = new Proxy(target, proxyConf)
  return observed
}
nuise_
关注
  • 0
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3.0数据响应式原理详解
10-16
总的来说，Vue3.0的数据响应式原理是通过`Proxy`进行数据劫持，利用`Dep`和`ReactiveEffect`跟踪数据变化，以及`Composition API`简化组件逻辑，实现了高效的双向数据绑定。这一系列机制确保了Vue3应用能够在数据...
Vue2和Vue3之响应式原理详解
上善若泪
03-26 752
在讲解之前，我们先了解一下数据响应式是什么？所谓数据响应式就是建立响应式数据与依赖（调用了响应式数据的操作）之间的关系，当响应式数据发生变化时，可以通知那些使用了这些响应式数据的依赖操作进行相关更新操作，可以是DOM更新，也可以是执行一些回调函数。Vue3track（收集依赖）和trigger（触发依赖）
【Vue】Vue 项目前端响应式布局及框架搭建
热门推荐
懂得一千零一种,赋予你失败的方法！
03-28 1万+
文章目录Vue 项目前端响应式布局及框架搭建一、项目基本结构二、项目分辨率响应式创建1、flexible.js2、引用 flexible 插件3、修改 flexible 默认配置4、cssrem 插件 (px -> rem)三、项目页面框架搭建1、设置背景图2、设置标题文字3、页面主体部分（1）section 主体部分（2）左、中、右布局（3）左、右图表容器整体插槽（4）左、右各图表容器插槽（5）中间图表容器布局四、图表环境搭建1、Echarts 全局引用2、Axios 全局引用 Vue 项目前..
Vue响应式原理详解
最新发布
panerchao的博客
05-27 632
首先我们先来看一下最开始提出的问题。第一个：给属性重新赋值成对象，是否是响应式的？答案：是响应式的。应当我们给data中的属性进行重新赋值的时候，会执行Observer类中的方法的set方法在set方法中，调用了walk方法，该方法中判断重新给data属性中赋的值是否为对象，如果是对象，会将对象中的每个属性都修改成响应式的。第二个问题：给Vue实例新增一个成员是否是响应式的？
VUE3中echarts图表的响应式布局
m0_66333906的博客
03-12 2285
单个图表 //获取dom节点 var myChart = echarts.init(document.getElementById('main')); //渲染dom myChart.setOption({...}) // 响应式 window.onresize = function() { myChart.resize(); } 注意：这种方法只能对一个图表有用，如果一个页面当中同时存在多个图表的话，只会对最后一个图表生效。而我们在vue中使用的时候往往会有多个图表，虽然我们把不同的图表分为多
深入解析 Vue3 响应式（附脑图）
前端达人
08-23 2675
写在前面本文的目标是实现一个基本的vue3的响应式，包含最基础的情况的处理，本文是系列文章，如果你对vue3还不了解，那么请移步：超详细整理vue3基础知识????[1]本文你将学到一个基础的响应式实现 ✅Proxy ✅Reflect ✅嵌套effect的实现 ✅computed ✅watch ✅浅响应与深响应 ✅浅只读与深只读 ✅处理数组长度 ✅ref ✅toRefs ✅响应式.png一. 实现一个完...
Vue3--响应式的设计与实现
willwe的博客
02-07 827
小作文，本文为霍春阳的《Vue.js设计与实现》一书的第四章：响应系统的作用与实现 的分享文章。是我在美团实习所做的第一次组间技术分享内容。原写于公司内部文档系统，但发现无法转载，故CV到这里。Map 是一种新的集合类型，为这门语言带来了真正的键/值存储机制。//创建空映射//在创建时初始化实例，可以给 Map 构造函数传入一个可迭代对象，需要包含键/值对数组//嵌套数组初始化映射]);// 3// 使用自定义迭代器初始化映射});// 3。
浅谈Vue 数据响应式原理
08-27
Vue 数据响应式原理详解 Vue 的数据响应式原理是 Vue 框架最...Vue 的数据响应式原理是基于 Object.defineProperty() 方法和 Dep 实例实现的。它使得开发者可以轻松地实现数据的双向绑定，提高了开发效率和应用性能。
Vue2.X和Vue3.0数据响应原理变化的区别
10-16
Vue2.x和Vue3.0在数据响应原理上有显著的区别，主要体现在对象属性的监听方式上。 在Vue2.x中，数据响应性是通过`Object.defineProperty()`来实现的。这个内置方法可以修改对象的属性描述符，包括访问器属性...
Vue实现双向绑定的原理以及响应式数据的方法
12-12
总的来说，Vue的双向绑定和响应式数据主要依赖于`Object.defineProperty()`、数据依赖收集、setter/getter、`Dep`和`Watcher`的机制。通过这些技术，Vue能够实现在数据变化时自动更新视图，以及在大量数据更新时的...
vue3 setup实现响应式
m0_57364615的博客
11-02 1104
vue3 setup
【项目实训】vue3项目响应式布局+移动端查看布局（更新）
huan_baba的博客
10-05 2388
vue3响应式布局
Vue中的响应式布局
weixin_46549873的博客
03-15 1307
带key，key的值是index, 按照key的值index来比对，默认使用的是v-for的就地复用。带key，key的值是id, 按照id的值来比对，直接将创建好的元素插入到指定为止。当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，3. 根元素没有变化，属性变化了， 复用标签，打补丁更新属性。key值的选择，如果有id使用id，如果没有id使用index。带key，提高for循环的执行效率。
一、Vue3新征程--响应式原理/组合式API
qq_63011146的博客
03-15 958
vue3组合式apI
Vue3响应式方案
l63492818的博客
04-04 1066
非原始值响应式方案、原始值响应式方案；ref、Proxy、Reflect
玩转Vue3全家桶07 | 巧妙的响应式：深入理解Vue 3的响应式机制
fegus的博客
10-02 809
响应式一直都是 Vue 的特色功能之一。与之相比，JavaScript 里面的变量，是没有响应式这个概念的。你在学习 JavaScript 的时候首先被灌输的概念，就是代码是自上而下执行的。我们看下面的代码，代码在执行后，打印输出的两次 double 的结果也都是 2。即使我们修改了代码中的 count 的值后，double 的值也不会有任何改变。
vue+bootstrap响应式布局_响应式布局进阶篇 响应式表格
weixin_39801475的博客
12-04 565
作者 | Brilliant Open Web团队编辑 | Brilliant Open Web团队本文继续在响应式布局上深入讨论，主要通过多个实际例子，探讨表格在不同设备下的响应式布局方式，以提供良好的用户体验。当我们有大量结构化数据需要在页面上展现时，通常会使用表格。但如果表格的列超过一定数量，它们很有可能会溢出视口。在视口较窄的设备上，较宽的表格可能会强迫用户通过水平滚动才能浏览全...
Vue Vue3的响应式
Errol's Blog
04-19 344
回顾 vue2.x 的响应式 实现原理： 。对象类型：通过object.defineProperty()对属性的读取、修改进行拦截（数据劫持) 。数组类型：通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹) Object.defineProperty(data,'count ",{ get(){}, set(){} }) 存在问题： 。新增属性、删除属性，界面不会更新 。直接通过下标修改数组，界面不会自动更新 但是 vue2 给了解决方法，我们看以下代码： <template&
浅聊vue3响应式
weixin_55341181的博客
02-18 1010
随着vue3的生态越来越成熟，外面也越来越多的企业应用到了vue3，当然面试也有少企业会问到vue3的一些面试题，其中比较常问到的就是vue3的响应式和vue2的有什么区别？这里就简单的聊下其他的区别并且简单的聊下下vue3的原理。 vue2的响应式 核心 对象：通过defineProperty 重新定义一遍目标对象，完成对目标对象的劫持，值发生变化后触发set方法后通知订阅者告诉某个属性发生变化。 数组；通过重写数组更新数组一系列更新袁术的方法来实现元素的修改和劫持。
说一下Vue2数据响应式的原理和Vue3数据响应式原理的不同
04-04
Vue2数据响应式的原理： Vue2利用了Object.defineProperty()方法来实现数据响应式。在Vue2中，当数据被访问时，会触发getter方法，当数据被修改时，会触发setter方法。Vue2会在组件实例化时递归地将data中的所有属性转换成getter/setter，并且在组件渲染时收集所有依赖，当数据变化时，会通知所有依赖进行更新。 Vue3数据响应式原理的不同： Vue3利用Proxy对象来实现数据响应式。在Vue3中，当数据被访问或修改时，会触发Proxy对象的get或set方法。与Vue2中的Object.defineProperty()相比，Proxy能够监听更多的变化情况，比如数组的变化、动态新增的属性等。此外，Vue3还引入了Reactivity API，使得开发者可以更加灵活地控制响应式数据的行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值