const Vue = (function () {
let uid = 0;
// 消息管理员，用于存储订阅者并发布消息
class Dep {
constructor () {
this.id = uid++; // 设置ID，用于区分新watcher
this.subs = []; // 存储订阅者的数组
}
depend () { // 触发target上的Watcher中的addDep方法，参数为dep的实例本身,方法作用就是将watcher放进subs数组
Dep.target.addDep(this);
}
addSub (sub) { // 添加订阅者
this.subs.push(sub);
}
notify () {
this.subs.forEach(sub => sub.update());
}
}
Dep.target = null;
// 监听者，监听对象属性值的变化
class Observer {
constructor (value) {
this.value = value;
this.walk(value);
}
walk (value) { // 遍历属性值并监听
Object.keys(value).forEach(key => this.convert(key, value[key]))
}
convert (key, val) { // 执行监听的具体方法
defineReactive(this.value, key, val);
}
}
function defineReactive (obj, key, val) {
const dep = new Dep(); // 一个属性一个消息管理器？
let childOb = observer(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: () => {
console.log('我不是get了吗');
// 如果Dep类存在target属性，将其添加至dep实例的subs数组中，target指向一个watcher实例
// 每个watcher都是一个订阅者，watcher实例在实例化的过程中，会读取data中的某个属性，从而触发当前的get方法
if (Dep.target) {
dep.depend();
}
return val;
},
set: newVal => {
console.log('我不是set了吗', newVal, val);
if (newVal !== val) { // 发生改变了,可能由一个普通变量转变为对象，所以需要继续监听
val = newVal;
childOb = observer(newVal);
dep.notify();
}
}
})
}
function observer (val) {
if (val && typeof val === 'object') {
return new Observer(val);
}
return '';
}
// 订阅者,指的是它需要知道某个对象发生改变而做出反应，需要先订阅
class Watcher {
constructor (vm, expOrFn, callback) {
this.depIds = {}; // hash储存订阅者的ID，避免重复的订阅者
this.vm = vm; // 被订阅的数据一定要来自于当前的vue实例
this.callback = callback; // 回调函数
this.exOrFn = expOrFn; // 被订阅的数据
this.val = this.get(); // 维护更新之前的数据
}
// 订阅中心在监听到数据发生改变时会触发notify方法，方法中调用update方法
update () {
this.run();
}
run () {
let val = this.get();
this.val = val;
this.callback.call(this.vm, val);
}
addDep (dep) {
// 如果在depIds中的hash中没有当前ID，可以判断是新的Watcher，因此可以添加到dep的数组中存储，此判断是为了避免同ID的watcher被多次存储
// 一个新的watcher对象只可以被一个订阅中心储存一次
if (!this.depIds.hasOwnProperty(dep.id)) {
dep.addSub(this);
this.depIds[dep.id] = dep;
}
}
get () {
// 将当前的watcher传到Dep.target属性里面，方便获取
Dep.target = this;
const val = this.vm._data[this.exOrFn]; // 触发了observer的get方法,并将当前订阅者存放到了sups数组
Dep.target = null; // 置空
return val;
}
}
class vue {
constructor (options = {}) {
let data = (this._data = options.data); // vue绑定的数据
this.methods = options.methods; // vue绑定的方法
Object.keys(data).forEach(key => this._proxy(key)) // 将data的属性都代理到vue实例上，这样可以监听到他的改变
observer(data);
}
$watch (expOrFn, cb) {
new Watcher(this, expOrFn, cb)
}
_proxy (key) {
Object.defineProperty(this, key, {
configurable: true,
enumerable: true,
get: () => {
return this._data[key]
},
set: val => {
this._data[key] = val;
}
})
}
}
return vue
})();
let demo = new Vue({
data: {
text: '',
},
});
const p = document.getElementById('p');
const input = document.getElementById('input');
input.addEventListener('keyup', function(e) {
demo._data.text = e.target.value;
});
demo.$watch('text', str => p.innerHTML = str);
// 基于proxy升级的订阅发布模式
const Vue = (function () {
let uid = 0
// 用于储存订阅者并发布消息
class Dep {
constructor () {
// 设置id,用于区分新Watcher和只改变属性值后新产生的Watcher
this.id = uid++
// 储存订阅者的数组
this.subs = []
}
// 触发target上的Watcher中的addDep方法,参数为dep的实例本身
depend () {
Dep.target.addDep(this)
}
// 添加订阅者
addSub (sub) {
this.subs.push(sub)
}
notify () {
// 通知所有的订阅者(Watcher)，触发订阅者的相应逻辑处理
this.subs.forEach(sub => sub.update())
}
}
// 为Dep类设置一个静态属性,默认为null,工作时指向当前的Watcher
Dep.target = null
// 监听者,监听对象属性值的变化
class Observer {
constructor (value) {
this.value = value
this.walk(value)
}
// 遍历属性值并监听
walk (value) {
Object.keys(value).forEach(key => this.convert(key, value[key]))
}
// 执行监听的具体方法
convert (key, val) {
defineReactive(this.value, key, val)
}
}
function defineReactive (obj, key, val) {
const dep = new Dep()
// 给当前属性的值添加监听
let chlidOb = observe(val)
if (typeof val === 'object') {
obj[key] = new Proxy(val, {
set (target, property, val2, receiver) {
if (val === val2) return
// 对新值进行监听
chlidOb = observe(val2)
// 通知所有订阅者，数值被改变了
let returnData = Reflect.set(target, property, val2, receiver)
dep.notify()
return returnData
},
get (target, key, receiver) {
if (Dep.target) {
dep.depend()
}
return Reflect.get(target, key, receiver)
}
})
} else {
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: () => {
// 如果Dep类存在target属性，将其添加到dep实例的subs数组中
// target指向一个Watcher实例，每个Watcher都是一个订阅者
// Watcher实例在实例化过程中，会读取data中的某个属性，从而触发当前get方法
if (Dep.target) {
dep.depend()
}
return val
},
set: newVal => {
if (val === newVal) return
val = newVal
// 对新值进行监听
chlidOb = observe(newVal)
// 通知所有订阅者，数值被改变了
dep.notify()
}
})
}
}
function observe (value) {
// 当值不存在，或者不是复杂数据类型时，不再需要继续深入监听
if (!value || typeof value !== 'object') {
return
}
return new Observer(value)
}
class Watcher {
constructor (vm, expOrFn, cb) {
this.depIds = {} // hash储存订阅者的id,避免重复的订阅者
this.vm = vm // 被订阅的数据一定来自于当前Vue实例
this.cb = cb // 当数据更新时想要做的事情
this.expOrFn = expOrFn // 被订阅的数据
this.val = this.get() // 维护更新之前的数据
}
// 对外暴露的接口，用于在订阅的数据被更新时，由订阅者管理员(Dep)调用
update () {
this.run()
}
addDep (dep) {
// 如果在depIds的hash中没有当前的id,可以判断是新Watcher,因此可以添加到dep的数组中储存
// 此判断是避免同id的Watcher被多次储存
if (!this.depIds.hasOwnProperty(dep.id)) {
dep.addSub(this)
this.depIds[dep.id] = dep
}
}
run () {
const val = this.get()
this.val = val
this.cb.call(this.vm, val)
}
get () {
// 当前订阅者(Watcher)读取被订阅数据的最新更新后的值时，通知订阅者管理员收集当前订阅者
Dep.target = this
let val = this.vm._data[this.expOrFn] // 触发一个get
if (typeof val === 'object') { // 没有被get到，没存进去
if (Object.prototype.toString.call(val) === '[object Array]') {
val = Object.assign([], this.vm._data[this.expOrFn])
} else if (Object.prototype.toString.call(val) === '[object Object]') {
val = Object.assign({}, this.vm._data[this.expOrFn])
}
}
Dep.target = null
return val
}
}
class Vue {
constructor (options = {}) {
// 简化了$options的处理
this.$options = options
// 简化了对data的处理
let data = (this._data = this.$options.data)
// 监听数据
observe(this._data)
// 将所有data最外层属性代理到Vue实例上
Object.keys(this._data).forEach(key => this._proxy(key, this._data[key]))
}
// 对外暴露调用订阅者的接口，内部主要在指令中使用订阅者
$watch (expOrFn, cb) {
new Watcher(this, expOrFn, cb)
}
// obj[key] = new Proxy(value,
// defineObjectReactive(data, k, data[k])
_proxy (key, value) {
let _this = this
if (typeof value === 'object') {
this[key] = new Proxy(value, {
set (target, key, val, receiver) {
return Reflect.set(target, key, val, receiver)
},
get (target, key, receiver) {
return Reflect.get(target, key, receiver)
}
})
} else {
Object.defineProperty(this, key, {
configurable: true,
enumerable: true,
get: () => this._data[key],
set: val => {
this._data[key] = val
},
})
}
}
}
return Vue
})()
let demo = new Vue({
data: {
text: '',
list: []
},
})
const p = document.getElementById('p')
const input = document.getElementById('input')
input.addEventListener('keyup', function (e) {
demo.text = e.target.value
})
demo.$watch('text', str => p.innerHTML = str)
const list = document.getElementById('list')
const btn = document.getElementById('btn')
btn.addEventListener('click', function () {
demo.list.push(1)
})
const render = arr => {
const fragment = document.createDocumentFragment()
if (document.querySelectorAll('li').length === arr.length) { // 说明只是改了数据内容，没改长度
let spanArray = document.querySelectorAll('span')
for (let i = 0; i < arr.length; i++) {
spanArray[i].innerHTML = arr[i]
}
} else {
let li = document.createElement('li')
let span = document.createElement('span')
span.innerHTML = arr[arr.length - 1]
let input = document.createElement('input')
input.value = arr[arr.length - 1]
input.className = 'testInput'
li.appendChild(span)
li.appendChild(input)
fragment.appendChild(li)
list.appendChild(fragment)
let allInput = document.querySelectorAll('.testInput')
allInput[arr.length - 1].oninput = function (e) {
demo.list[arr.length - 1] = e.target.value
}
}
}
demo.$watch('list', list => {
render(list)
})
