VUE响应式原理的实现详解

目录
  • 总结

前言

相信vue学习者都会发现,vue使用起来上手非常方便,例如双向绑定机制,让我们实现视图、数据层的快速同步,但双向绑定机制实现的核心数据响应的原理是怎么样的呢,接下来让我们开始介绍:

function observer(value) {

	//给所有传入进来的data 设置一个__ob__对象 一旦value有__ob__ 说明该value已经做了响应式处理
	Object.defineProperty(value, '__ob__', {
		value: this, //当前实例 也就是new observer
		enumerable: false, //不可枚举  即不可for in
		writable: true, // 可用赋值运算符改写__ob__
		configurable: true //可改写可删除
	})

	//这里是判断是对象 数组的话需要改造数组原型上的方法
	if (Object.prototype.toString.call(value) === "[object Array]") {
		//数组的话需要改造数组原型上的方法 下面会讲解arrayMethods
		value.__proto__ = arrayMethods;
		//对数组进行响应式处理
		observeArray(value);
	} else {
		//如果是对象 遍历对象属性进行响应式处理
		iterate(value)
	}

}

// 遍历对象属性进行响应式处理
function iterate(data) {
	const keys = Object.keys(data);
	keys.forEach((key) => {
		defineReactive(data, key, data[key])
	})
}

//响应式处理 这里是核心
function defineReactive(data, key, value){
	//递归对象 这里是因为对象里面仍可能嵌套对象
	observe(value)

	//写道这里 Object.defineProperty 我们主角出场了
 	// 这里实现了读写都能捕捉到,响应式的底层原理
	Object.defineProperty(data, key, {
		get() {
			console.log('我被成功访问啦!');
			return value
		},
		set(newValue) {
			if (newValue === value) return
			console.log("我被变更啦")
			value = newValue
		}
	})
}

function  observeArray(data) {
	data.forEach(item => {
		observe(item)
	})
}

function observe(value) {
    // 如果传进来的是对象或者数组,则进行响应式处理
    if (Object.prototype.toString.call(value) === '[object Object]' || Object.prototype.toString.call(value) === "[object Array]") {
        return new Observer(value)
    }
}

上面代码简单的实现了vue2.0中响应式的原理,相信注释也非常的清晰,总结一下三个主要的方法:

名称 作用
observer 观察者对象,对数组、对象进行响应式处理
defineReactive 拦截对象中的key中的set、get方法
observe 响应式处理的入口

从上面的大致实现方法中,我们不难看出几个问题:

1.使用defineProperty,我们无法实现对象删除的监听、以及新增对象属性的时候,set方法没有被调用,下图是实验结果

2.数组修改只能通过改写的方法,无法通过arr[index] = xxx 进行修改,也无法通过length属性进行修改,下图是输出结果:

解决方案

针对上面的问题,vue提出了自己的解决方案:

$set(obj, key, value),原理相信大家不难猜出,通过hack的方式,对象的处理方法是重新为对象赋值,而数组是通过splice来转换为响应式

function set (target, key, val) {
  //isValidArrayIndex 用来检测是否合法索引
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key);
    target.splice(key, 1, val);
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val
  }
  //...
  defineReactive$$1(ob.value, key, val);
  ob.dep.notify();
  return val
}

数组的特殊处理

相信大家还发现,数组做了特殊处理,上面的代码也写到没有使用遍历使用defineProperty去监听数据,修改数组原型上的部分方法,来实现修改数组触发响应式,也就是上面代码的arrayMethods,我们接着来看这个的具体实现思路:

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

const methodsToPatch = [
	'push',
	'pop',
	'shift',
	'unshift',
	'splice',
	'sort',
	'reverse'
]

methodsToPatch.forEach(method =>{
	// 缓存原来的方法
	def(arrayMethods, method)
})

function def(obj, key) {
	Object.defineProperties(obj, key, {
		enumerable: true,
		configurable: true,
		value: function (...args) {

			//获取数组原生方法
			let original = arrayProto[key];

			//改变this指向
			const result = original.apply(this, args)

			console.log('我被更新了');

			//result就是上文的arrayMethods
			return result;
		}
	})
}

这里大概分为三个思路

1.获取数组原型上的方法

2.使用defineProperties对数组原型上的方法进行劫持

3.把需要被改造的 Array 原型方法指向改造后原型。

这样做的好处

没有直接修改 Array.prototype,而是直接把 arrayMenthods 赋值给 value 的 proto 。因为这样不会污染全局的Array, arrayMenthods 只对 data中的Array 生效。

题外话

关于数组为什么不使用defineProperties进行劫持,网上大部分说法都是觉得开销太大,因为在我们业务场景中一般的对象不会有太多属性,但列表中几千、上万条数据确是很正常,这一点也可以讲通。

总结

感谢你的阅读,在vue3.0中使用proxy进行数据劫持后,都说解决了2.0存在的问题以及提升了效率,后面我也会完善3.0响应式的实现原理。

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • vue3.0响应式函数原理详细

    目录 1.reactive 2.ref 3.toRefs 4.computed 前言: Vue3重写了响应式系统,和Vue2相比底层采用Proxy对象实现,在初始化的时候不需要遍历所有的属性再把属性通过defineProperty转换成get和set.另外如果有多层属性嵌套的话只有访问某个属性的时候才会递归处理下一级的属性所以Vue3中响应式系统的性能要比Vue2好. 接下来我们自己实现Vue3响应式系统的核心函数(reactive/ref/toRefs/computed/effect/trac

  • Vue响应式原理的示例详解

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

  • vue中v-model和响应式的实现原理解析

    目录 v-model 响应式实现 v-model 首先要了解v-model就是vue帮我们封装的语法糖,真正实现靠的还是: v-bind:绑定响应式数据 触发 input 事件 并传递数据 例如下面示例: <template> // 这两种写法等价 <input v-bind:name="name" v-on:input="name=$event.target.value"/> <input v-model="name&quo

  • 详解Vue3的响应式原理解析

    目录 Vue2响应式原理回顾 Vue3响应式原理剖析 嵌套对象响应式 避免重复代理 总结 Vue2响应式原理回顾 // 1.对象响应化:遍历每个key,定义getter.setter // 2.数组响应化:覆盖数组原型方法,额外增加通知逻辑 const originalProto = Array.prototype const arrayProto = Object.create(originalProto) ;['push', 'pop', 'shift', 'unshift', 'splic

  • 详解VUE响应式原理

    目录 1.响应式原理基础 2.核心对象:Dep与Watcher 3.收集依赖与更新依赖 3.1 收集依赖 3.2 更新依赖 4.源码调试 4.1 测试的页面代码 1.对象说明 2.Dep与Watcher的关系 3.最终的关系结果 4.2  源码调试 1.收集依赖的入口函数:initState(页面初始化时执行); 2.初始化computed和watch时,生成Watcher实例化对象 总结 1.响应式原理基础 响应式基本原理是基于Object.defineProperty(obj, prop,

  • 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学习者都会发现,vue使用起来上手非常方便,例如双向绑定机制,让我们实现视图.数据层的快速同步,但双向绑定机制实现的核心数据响应的原理是怎么样的呢,接下来让我们开始介绍: function observer(value) { //给所有传入进来的data 设置一个__ob__对象 一旦value有__ob__ 说明该value已经做了响应式处理 Object.defineProperty(value, '__ob__', { value: this, //当前实例 也

  • Bootstrap 响应式实用工具实例详解

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本.响应式实用工具目前只适用于块和表切换. 实例 下面的实例演示了上面所列举的帮助器类的用法.调整浏览器的窗口大小,或者在不同的设备上加载实例,测试响应式实用工具类. <div class="container" style="padding: 40px;"&

  • 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响应式原理

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

  • Vue响应式原理及双向数据绑定示例分析

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

  • 实现一个VUE响应式属性装饰器详析

    目录 前言 不使用任何的响应Api 使用 reactive 实现 使用 ref 实现 使用装饰器实现 实现Reactive装饰器 实现Watch装饰器 总结 前言 使用面向对象的开发思想难免会用到类,既然有了类,那就应该有实例,然而我们使用类的时候可能需要实例中的某个属性是vue的响应属性,也可能里面的某个方法也可以被vue的watch监听.我就开始琢磨如何通过 Composition API 来实现这个类属性装饰器 不使用任何的响应Api // TestReactive.ts export c

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

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

随机推荐