vue数据劫持

最新推荐文章于 2023-12-12 16:37:33 发布
置顶 最新推荐文章于 2023-12-12 16:37:33 发布
阅读量720 收藏 6
点赞数 2
分类专栏： react vue 文章标签： vue 数据劫持 双向数据绑定 Object.defineProperty
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luofeng457/article/details/103306672
版权
react 同时被 2 个专栏收录
9 篇文章 0 订阅
订阅专栏
vue
4 篇文章 0 订阅
订阅专栏

原理

vue2.x是基于Object.defineProperty实现双向数据绑定的；该函数可以在获取属性值或者设置属性值的时候监听属性的get和set事件，并进行相关的操作；当然，这些具体的操作就需要通过发布订阅者模式作为补充；

Vue 3.0是基于ES6 Proxy重写了其核心逻辑，代替了原来的Object.defineProperty；优势是：

  1. 劫持整个对象并返回一个新对象，而不是像Object.defineProperty需要循环遍历整个对象属性；
  2. 支持监听数组变化；
  3. 支持更加丰富的数据劫持操作；

如模板解析时每遇到一个属性，就为该属性添加一个发布订阅，从而能够进行双向数据绑定；

  1. 乞丐版

    function observe(obj) {
	if (!obj || typeof obj !== 'object') {	// 处理类型为null/undefined/非对象
		return;
	}
	Object.keys(obj).forEach(key => {	// 遍历子属性并进行属性监听；
		defineReactive(obj, key, obj[key]);
	})
}	

function defineReactive(obj, key, value){
	observe(value);	// 递归子属性
	Object.defineProperty(obj, key, {
		configurable: true,
		enumerable: true,
		get() {
			console.log('get value: ', value);
			return value;
		},
		set(newVal) {
			console.log('set value: ', newVal);
			value = newVal
		}
	})
}

var data = {name: 'vue'}
observe(data);
data.name;			// get value: fn
data.name = 'fn';	// set value:  fn
data.name;			// get value: fn

  2. 为属性添加发布订阅模式
    在这里插入图片描述

    class Dep {
	constructor(){
		this.subs = [];
	}
	// 添加订阅者
	add(sub) {
		// sub 是watcher的实例, 每次解析到模板中的属性时，就通过watcher为属性添加订阅并更新视图；
		this.subs.push(sub);
	}
	// 通知变化
	notify() {
		this.subs.forEach(sub => {
			sub.update();
		})
	}
}
// 通过静态属性设置Dep的目标对象
Dep.target = null;

class Watcher {
	constructor(obj, key, cb) {
		Dep.target = this;	// 设置Dep通知变化的目标对象
		this.cb = cb;
		this.obj = obj;		// 待监听对象
		this.key = key;
		this.value = obj[key];	// 手动触发属性的get事件
		Dep.target = null;	// 每次为属性添加一个watcher之后解除Dep与Watcher的关联；
	}
	// 接受变化并更新视图
	update() {
		// get new value
		this.value = this.obj[this.key];
		// update view
		this.cb(this.value);
	}
}

    测试

    // Watcher的cb函数
function update(value) {
    document.querySelector('div').innerText = value
}

var data= {name: 'vue'};
observe(data);				

new Watcher(data, 'name', update);		// 模拟解析属性name的操作

  3. 升级版
    上边一小节中， 我们已经通过watcher模拟解析到属性时的操作；但是这个行为是我们手动操作的，并没有与observe建立关系让其自动订阅与通知；本节实现此功能；

    function observe(obj) {
    if (!obj || typeof obj !== 'object') {	// 处理类型为null/undefined/非对象
        return;
    }
    Object.keys(obj).forEach(key => {	// 遍历子属性并进行属性监听；
        defineReactive(obj, key, obj[key]);
    })
}

function defineReactive(obj, key, value) {
    observe(value);	// 递归子属性
    let dep = new Dep();
    Object.defineProperty(obj, key, {
        configurable: true,
        enumerable: true,
        get() {
            console.log('get value: ', value);
            if (Dep.target) {
                dep.addSub(Dep.target);     // Dep.target是watcher实例，即订阅者sub
            }
            return value;
        },
        set(newVal) {
            console.log('set value: ', newVal);
            value = newVal;
            // 调用watcher的update方法更新视图
            dep.notify();
        }
    })
}

class Dep {
    constructor() {
        this.subs = [];
    }
    // 添加订阅者
    addSub(sub) {
        // 订阅者sub 是watcher的实例, 每次解析到模板中的属性时，就通过watcher为属性添加订阅并更新视图；
        this.subs.push(sub);
    }
    // 通知变化
    notify() {
        this.subs.forEach(sub => {
            sub.update();
        })
    }
}
// 通过静态属性设置Dep的目标对象， 建立Dep与Watcher的关系
Dep.target = null;

class Watcher {
    constructor(obj, key, cb) {
        Dep.target = this;	// 设置Dep通知变化的目标对象
        this.cb = cb;
        this.obj = obj;		// 待监听对象
        this.key = key;
        this.value = obj[key];  // 手动触发属性的get事件
        Dep.target = null;	// 每次为属性添加一个watcher之后解除Dep与Watcher的关联；
    }
    // 接受变化并更新视图
    update() {
        // get new value
        this.value = this.obj[this.key];
        // update view
        this.cb(this.value);
    }
}

  4. 完整demo
    参见github

    <!DOCTYPE html>
<html lang="en">

<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>Vue数据劫持</title>
	<style>
		.collapse {
			color: lightskyblue;
		}
		#show {
			font-size: 30px;
			color: greenyellow;
		}
	</style>
</head>
<body>
	<div class="collapse">
		<label for="input">Your name: &nbsp;</label>
		<input type="text" id="input">
		<div id="show"</div>
	</div>
	<script>
		function observe(obj) {
			if (!obj || typeof obj !== 'object') {	// 处理类型为null/undefined/非对象
				return;
			}
			Object.keys(obj).forEach(key => {	// 遍历子属性并进行属性监听；
				defineReactive(obj, key, obj[key]);
			})
		}

		function defineReactive(obj, key, value) {
			observe(value);	// 递归子属性
			let dep = new Dep();
			Object.defineProperty(obj, key, {
				configurable: true,
				enumerable: true,
				get() {
					console.log('get value: ', value);
					if (Dep.target) {
						dep.addSub(Dep.target);     // Dep.target是watcher实例
					}
					return value;
				},
				set(newVal) {
					console.log('set value: ', newVal);
					value = newVal;
					// 调用watcher的update方法更新视图
					dep.notify();
				}
			})
		}

		class Dep {
			constructor() {
				this.subs = [];
			}
			// 添加订阅者
			addSub(sub) {
				// sub 是watcher的实例, 每次解析到模板中的属性时，就通过watcher为属性添加订阅并更新视图；
				this.subs.push(sub);
			}
			// 通知变化
			notify() {
				this.subs.forEach(sub => {
					sub.update();
				})
			}
		}
		// 通过静态属性设置Dep的目标对象， 建立Dep与Watcher的关系
		Dep.target = null;

		class Watcher {
			constructor(obj, key, cb) {
				Dep.target = this;	// 设置Dep通知变化的目标对象
				this.cb = cb;
				this.obj = obj;		// 待监听对象
				this.key = key;
				this.value = obj[key];  // 手动触发属性的get事件
				Dep.target = null;	// 每次为属性添加一个watcher之后解除Dep与Watcher的关联；
			}
			// 接受变化并更新视图
			update() {
				// get new value
				this.value = this.obj[this.key];
				// update view
				this.cb(this.value);
			}
		}

		function update(value) {
			document.querySelector('#show').innerText = value
		}

		var data = { name: 'vue' };
		observe(data);

		new Watcher(data, 'name', update);

		function handleChange(e) {
			data.name = e.target.value;
		}
		window.onload = function () {
			let input = document.querySelector('#input');
			let show = document.querySelector('#show').innerText = data.name;
			input.addEventListener('change', e => {
				handleChange(e);
			})
		}
	</script>
</body>
</html>

参考文献

  1. 架构通识
Neil-
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【Vue知识点】——Vue2和Vue3的数据劫持
m0_50785976的博客
10-21 2039
Vue2的Object.defineProperty和Vue3的Proxy实现数据劫持
3分钟了解vue数据劫持的原理实现
10-17
在Vue中，数据劫持是实现数据驱动的关键技术之一。数据劫持是一种可以在数据对象的属性被访问或修改时，动态添加一些操作的技术。在Vue中，数据劫持主要通过Object.defineProperty()方法实现，该方法允许我们对对象...
Vue框架核心之数据劫持
网易数帆社区博客
08-16 1244
本文来自网易云社区。前瞻当前前端界空前繁荣，各种框架横空出世，包括各类mvvm框架横行霸道，比如Angular、Regular、Vue、React等等，它们最大的优点就是可以实现数据绑定，再也不需要手动进行DOM操作了，它们实现的原理也基本上是脏检查或数据劫持。那么本文就以Vue框架出发，探索作者运用Object.defineProperty来实现数据劫持的奥秘（本文所选取的相关代码源自于Vue ...
VUE中的数据劫持
weixin_48503807的博客
05-27 1576
VUE中的数据劫持 vue2.0 的数据劫持是利用 Object.defineProperty（）的 getter 和 setter 来监听到属性的变化时做一些事情。 而vue3.0 已经放弃了使用这个方法，而是采用 es6 提供的 proxy。 proxy 是代理器，用于改变某些操作的默认行为，在目标对象的外层架设了一层拦截，外界想要访问这个属性必须先经过proxy。 语法： var proxy = new Proxy(target,handler) 以下是用法示例: var per = { name
vue的数据劫持
weixin_44922480的博客
01-16 5638
vue的数据劫持和简述过程
【Vue】Vue 数据劫持
cannotbecounted的博客
12-12 1644
Vue 数据劫持
vue2数据劫持源码剖析
最新发布
04-16
Vue2 数据劫持是其响应式系统的核心机制，它使得数据变化时能够自动触发视图更新，实现数据和视图的双向绑定。在Vue2中，这一机制主要通过`Object.defineProperty`来实现。下面我们将深入探讨这个过程。 首先，Vue...
对vue中的数据劫持/数据代理/数据观察的理解
01-08
1、什么是数据劫持？ 首先写一个简单vue 例子： 数据劫持 {{message}} var vm = new Vue({ el:#app, data(){ return { message:测试数据 } } }) 将数据挂载到视图上很简单，使用{{}}...
深入浅出 Vue 系列 -- 数据劫持实现原理
10-17
深入浅出 Vue 系列 -- 数据劫持实现原理 数据劫持是 Vue 框架核心功能之一，它使得开发者能够轻松地实现数据的双向绑定。在本篇文章中，我们将深入探讨 Vue 实现数据劫持的原理，并对其实现细节进行剖析。 一、...
浅谈Vue2数据劫持
vike_123的博客
09-24 1427
今天我们一起来看看Vue2中数据劫持的方法 ps:本章脱离vue2单讲数据劫持 什么是数据劫持 对属性的读取和修改拦截 简单来说就是数据的任何变化都要能监测到，这样才能根据数据变化做对应操作 为什么要用数据劫持 Vue2中data里的数据都是响应式数据，数据一经更改，页面上的数据就会进行局部更新 如果不进行数据劫持，不知道数据状态就无从更新数据 Vue2中数据劫持使用了Object.defineProperty方法 使用Object.defineProperty可以给对象
Vue核心之数据劫持
dksks130的博客
12-06 929
Vue核心之数据劫持.......
vue 数据劫持详解
weixin_33757609的博客
06-17 5766
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue数据劫持详解
热爱编程的你我
05-17 2789
Vue数据劫持详解
Vue2实现数据劫持
weixin_48142622的博客
10-12 547
【代码】Vue2实现数据劫持。
Vue数据劫持
qq_45633169的博客
03-19 137
vue 数据劫持详解_weixin_33757609的博客-CSDN博客 方法:劫持Object.defineProperty中的get,set方法,利用这两个方法,监测数据改变的同时,提醒Vue需要去解析模板,生成虚拟DOM,开始接下来的一系列操作 这同时也是数据监测的原理,只不过数据和对象的监测有一点点不一样 ...
vue中的数据劫持
m0_74176885的博客
09-11 157
本篇只是我对尚硅谷张老师课程代码自己做的一个注释，只是一个学习笔记，所以要结合视频看才行啊。课程视频（看33和34节）
Vue中数据劫持
syl的博客
11-18 230
Vue中的数据劫持 Vue中响应式系统的核心: { 数据劫持: 使用Object.defineProperty(this.属性名，{属性值的配置项} ); 依赖收集: 因为上一步数据劫持后, 在解析模板时，替换模板中的变量就需要读取变量的数据，此时就会触发数据的get方法,在get方法中收集所有依赖这个数据的dom节点; 观察者模式; 后续数据发生变化, 就会走set方法, 此时读取以前收集所有依赖该数据的dom节点,进行更新(内部有虚拟dom比对的步骤); } <body> &l
VUE2.0 数据劫持
lx392118613的博客
08-05 325
vue 数据劫持
前端vue数据劫持和代理
04-26
前端vue数据劫持和代理的区别主要在于它们所作用的对象不同。数据劫持是指在 Vue 的响应式系统中，通过 Object.defineProperty() 方法来监听对象属性的改变，并动态地更新视图。而代理是指将一个对象的访问代理到另...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Neil-

你们的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值