vue 2.0 响应式基本原理简单实现

最新推荐文章于 2023-11-13 23:43:00 发布

拼客骏

最新推荐文章于 2023-11-13 23:43:00 发布

阅读量637

点赞数

分类专栏： Es6 vscode 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_48914823/article/details/122773710

版权

vscode 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Es6

3 篇文章 0 订阅

订阅专栏

vue 3.0 出现已经变成了默认版本，订阅发布者模式与数据劫持完成了 vue2.0 的基本响应原理，趁着过节，没事干，就手写了个精简版，麻雀虽小，五脏俱全。看代码

1.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>vue2 数据响应式</title>

</head>

<body>
  <!-- 监听盒子一 -->
  <div class="box_one"></div>
  <div class="box_two"></div>
  <script src="./reactive.js"></script>
  <script>
    let obj = {}
    dataHi({
      data: obj,
      target: 'view_1',
      dataKey: 'one',
      selecter: '.box_one'
    })
    dataHi({
      data: obj,
      target: 'view_2',
      dataKey: 'two',
      selecter: '.box_two'
    })

    obj.one = '视图1'
    obj.two = '视图2'
  </script>
</body>

</html>

reactive.js

let Dep = {
	container: [], // 用于存放消息的数组
	// 添加订阅  参数   key  消息监听函数
	listen: function (key, fn) {
		// 如果有人添加订阅 ， 我们就先判断前面是不是添加过订阅
		// if (!this.container[key]) {
		// 如果没有添加过就添加一个空数组
		// this.container[key] = []
		// }
		// 将用户需要监听的东西加入到数组里面
		// this.container[key].push(fn)

		// 下面的写法是上面一堆的简写
		;(this.container[key] || (this.container[key] = [])).push(fn)
	},
	// 发布订阅
	trigger: function () {
		// 拿到 键值为 key 的 value , 循环调用里面的函数群
		let key = Array.prototype.shift.call(arguments) // 这个方法会改变原数组 去除argument上面的第一个参数  ， 将第一个参数拿到并且赋值给key
		let fns = this.container[key]
		// 如果key 值不存在  ，或者存在但是value 的 值为 0 ,那么就返回false
		if (!fns || fns.length === 0) {
			return false
		}
		// 循环调用里面的函数
		// for (let i = 0, fn; (fn = fns[i++]); ) {
		// 	console.log(fn)
		// 	fn.apply(this, arguments)
		// }
		for (let i = 0; i < fns.length; i++) {
			let fn = fns[i]
			fn.apply(this, arguments)
		}
	},
}
// 数据劫持的方法
let dataHi = function ({ data, target, dataKey, selecter }) {
	let value = '',
		el = document.querySelector(selecter)
	Object.defineProperty(data, dataKey, {
		get() {
			return value
		},
		set(newVal) {
			value = newVal
			Dep.trigger(target, newVal)
		},
	})
	// 添加订阅事件
	Dep.listen(target, function (text) {
		el.innerHTML = text
	})
}

大致就是你去超市买菜，但是菜卖没了，你告诉老板菜来了给我打电话，所以老板哪里就有好多顾客的电话，都是想买菜的，菜到了，老板一个一个打电话通知，然后就买到菜了。

拼客骏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 2.0 响应式基本原理简单实现

vue 3.0 出现已经变成了默认版本，订阅发布者模式与数据劫持完成了 vue2.0 的基本响应原理，趁着过节，没事干，就手写了个精简版，麻雀虽小，五脏俱全。看代码1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt
复制链接

扫一扫