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
})
}
大致就是你去超市买菜 , 但是菜卖没了 , 你告诉老板菜来了给我打电话 , 所以老板哪里就有好多顾客的电话,都是想买菜的,菜到了 , 老板一个一个打电话通知,然后就买到菜了。