ES6 Proxy实现Vue的变化检测问题
vue变化检测object使用defineproperty、数组使用方法拦截实现。最近,vue3.0将采用es6 proxy的形式重新实现vue的变化检测,在官方还没给出新方法之前,我们先实现一个基于proxy的变化检测。
模块划分
参照之前vue变化检测的代码,将vue 变化检测的功能分为以下几个部分。
- observer
- dep
- watcher
- utils
首先,我们要确定的问题是,将dep依赖搜集存在哪里。vue 2.x里,object的依赖收集放在defineractive,array的依收集存入到observer中。es6 proxy里,考虑到让handler访问dep,我们将依赖放入到observer中。
observer
observer.js功能代码如下:
import dep from './dep'; import { isobject } from './utils'; export default class observer { constructor (value) { // 递归处理子元素 this.obeserve(value); // 实现当前元素的代理 this.value = this.proxytarget(value); } proxytarget (targetbefore, keybefore) { const dep = new dep(); targetbefore.__dep__ = dep; let self = this; const filtersatrr = val => ['__dep__', '__parent__'].indexof(val) > -1; return new proxy(targetbefore, { get: function(target, key, receiver){ if (filtersatrr(key)) return reflect.get(target, key, receiver); if (!array.isarray(target)) { dep.depend(key); } // sort/reverse等不改变数组长度的,在get里触发 if (array.isarray(target)) { if ((key === 'sort' || key === 'reverse') && target.__parent__) { target.__parent__.__dep__.notify(keybefore); } } return reflect.get(target, key, receiver); }, set: function(target, key, value, receiver){ if (filtersatrr(key)) return reflect.set(target, key, value, receiver); // 新增元素,需要proxy const { newvalue, ischanged } = self.addproxytarget(value, target, key, self); // 设置key为新元素 reflect.set(target, key, newvalue, receiver); // notify self.depnotify(target, key, keybefore, dep, ischanged); return true; }, }); } addproxytarget(value, target, key, self) { let newvalue = value; let ischanged = false; if (isobject(value) && !value.__parent__) { self.obeserve(newvalue); newvalue = self.proxytarget(newvalue, key); newvalue.__parent__ = target; ischanged = true; } return { newvalue, ischanged, } } depnotify(target, key, keybefore, dep, ischanged) { if (ischanged && target.__parent__) { target.__parent__.__dep__.notify(keybefore); return; } if (array.isarray(target)) { if (key === 'length' && target.__parent__) { target.__parent__.__dep__.notify(keybefore); } } else { dep.notify(key); } } obeserve(target) { // 只处理对象类型,包括数组、对象 if (!isobject(target)) return; for (let key in target) { if (isobject(target[key]) && target[key] !== null) { this.obeserve(target[key]); target[key] = this.proxytarget(target[key], key); // 设置__parent__,方便子元素调用 target[key].__parent__ = target; } } } }
在observer中,针对对象,只需要执行 dep.depend(key)
、 dep.notify(key)
即可。添加 key 是为了能正确的触发收集,不知道怎么说明白为什么要这样做,只能一切尽在不言中了。
array, 如何实现依赖的收集和触发那。依赖收集与object类似, dep.depend(key)
完成数组的收集。关于触发,可以分为两个方面,一是改变数组长度、二未改变数组长度的。改变数组长度的,在set里,通过长度属性的设置触发父级元素的notify。为什么要使用父级元素的notify那?我们可以分析以下,在你设置数组的长度时,这时候的target\key\value分别是[]\length*, 这个时候,数组的依赖收集是没有的,你watcher的是数组,并不是数组本身。这个时候只能通过 target.__parent__.__dep__.notify(keybefore)
触发父级的收集,完成数据变化的检测。二对于未改变数组长度的,这里的做法,虽然是直接 target.__parent__.__dep__.notify(keybefore) 触发依赖,但是有个严重的问题,实际上更新的数据不是最新的,这个地方暂时还没想到比较好的方法,欢迎大家讨论。
dep
dep.js
let uid = 0; export default class dep { constructor () { this.subs = {}; this.id = uid++; } addsub(prop, sub) { this.subs[prop] = this.subs[prop] || []; this.subs[prop].push(sub); } removesub(prop, sub) { this.remove(this.subs[prop] || [], sub); } depend(prop) { if (dep.target) { // 传入的是当前依赖 dep.target.adddep(prop, this) } } notify(prop) { const subs = (this.subs[prop] || []).slice(); for (let i = 0, l = subs.length; i < l; i++) { subs[i].update(); } } remove(arr, item) { if (arr.length) { const index = arr.indexof(item); if (index > -1) { return arr.splice(index, 1); } } } } dep.target = null const targetstack = [] export function pushtarget (_target) { if (dep.target) targetstack.push(dep.target) dep.target = _target } export function poptarget () { dep.target = targetstack.pop() }
dep 添加prop实现类型的绑定,为什么要这么做那?使用proxy代理后,你假如wahcter对象下的几个元素,此时的deps将同时存在这几个元素,你触发依赖的时候,这些依赖都会执行。因此,通过key值绑定观察事件,触发时,能完成对象的正确触发。
watcher、utils
import { parsepath } from './utils'; import { pushtarget, poptarget } from './dep' export default class watcher { constructor(vm, exporfn, cb) { // dep id集合 this.depids = new set(); this.vm = vm; this.getter = parsepath(exporfn); this.cb = cb; this.value = this.get(); } get () { pushtarget(this); let value = this.getter.call(this.vm, this.vm); poptarget(); return value; } update() { const oldvalue = this.value; this.value = this.get(); this.cb.call(this.vm, this.value, oldvalue); } adddep (prop, dep) { const id = dep.id; if (!this.depids.has(id)) { this.depids.add(id); dep.addsub(prop, this); } } }
utils.js
/** * 解析简单路径 */ const bailre = /[^\w.$]/; export function parsepath (path) { if (bailre.test(path)) { return; } const segments = path.split('.'); return function (obj) { for (let i = 0; i < segments.length; i++) { if (!obj) return; obj = obj[segments[i]]; } return obj; }; } /** * define a property. */ export function def (obj, key, val, enumerable) { object.defineproperty(obj, key, { value: val, enumerable: !!enumerable, writable: true, configurable: true }) } /** * quick object check - this is primarily used to tell * objects from primitive values when we know the value * is a json-compliant type. */ export function isobject (obj) { return obj !== null && typeof obj === 'object' } /** * check whether an object has the property. */ const hasownproperty = object.prototype.hasownproperty export function hasown (obj, key) { return hasownproperty.call(obj, key) }
utils.js/watchers.js与vue 2.x类似,这里就不多介绍了。
测试一下
test.js
import observer from './observer'; import watcher from './watcher'; let data = { name: 'lijincai', password: '***********', address: { home: '安徽亳州谯城区', }, list: [{ name: 'lijincai', password: 'you know it object', }], }; const newdata = new observer(data); let index = 0; const watchername = new watcher(newdata, 'value.name', (newvalue, oldvalue) => { console.log(`${index++}: name newvalue:`, newvalue, ', oldvalue:', oldvalue); }); const watcherpassword = new watcher(newdata, 'value.password', (newvalue, oldvalue) => { console.log(`${index++}: password newvalue:`, newvalue, ', oldvalue:', oldvalue); }); const watcheraddress = new watcher(newdata, 'value.address', (newvalue, oldvalue) => { console.log(`${index++}: address newvalue:`, newvalue, ', oldvalue:', oldvalue); }); const watcheraddresshome = new watcher(newdata, 'value.address.home', (newvalue, oldvalue) => { console.log(`${index++}: address.home newvalue:`, newvalue, ', oldvalue:', oldvalue); }); const watcheraddprop = new watcher(newdata, 'value.addprop', (newvalue, oldvalue) => { console.log(`${index++}: addprop newvalue:`, newvalue, ', oldvalue:', oldvalue); }); const watcherdataobject = new watcher(newdata, 'value.list', (newvalue, oldvalue) => { console.log(`${index++}: newvalue:`, newvalue, ', oldvalue:', oldvalue); }); newdata.value.name = 'resetname'; newdata.value.password = 'resetpassword'; newdata.value.name = 'hello world name'; newdata.value.password = 'hello world password'; newdata.value.address.home = 'hello home'; newdata.value.address.home = 'hello home2'; newdata.value.addprop = 'hello addprop'; newdata.value.addprop ={ name: 'ceshi', }; newdata.value.addprop.name = 'ceshi2'; newdata.value.list.push('1'); newdata.value.list.splice(0, 1); newdata.value.list.sort(); newdata.value.list.reverse(); newdata.value.list.push('1'); newdata.value.list.unshift({name: 'nihao'}); newdata.value.list[0] = { name: 'lijincai', password: 'you know it array', }; newdata.value.list[0].name = 'you know it array after'; newdata.value.list.pop(); newdata.value.list.shift(); newdata.value.list.length = 1;
我们使用对象、数组测试一下我们的es6 proxy检测。
20:17:44.725 index.js?afc7:20 0: name newvalue: resetname , oldvalue: lijincai 20:17:44.725 index.js?afc7:24 1: password newvalue: resetpassword , oldvalue: *********** 20:17:44.725 index.js?afc7:20 2: name newvalue: hello world name , oldvalue: resetname 20:17:44.725 index.js?afc7:24 3: password newvalue: hello world password , oldvalue: resetpassword 20:17:44.726 index.js?afc7:32 4: address.home newvalue: hello home , oldvalue: 安徽亳州谯城区 20:17:44.726 index.js?afc7:32 5: address.home newvalue: hello home2 , oldvalue: hello home 20:17:44.726 index.js?afc7:36 6: addprop newvalue: hello addprop , oldvalue: undefined 20:17:44.727 index.js?afc7:36 7: addprop newvalue: proxy {name: "ceshi", __dep__: dep, __parent__: {…}} , oldvalue: hello addprop 20:17:44.727 index.js?afc7:40 0: newvalue: proxy {0: proxy, 1: "1", __dep__: dep, __parent__: {…}} , oldvalue: proxy {0: proxy, 1: "1", __dep__: dep, __parent__: {…}} 20:17:44.728 index.js?afc7:40 1: newvalue: proxy {0: "1", __dep__: dep, __parent__: {…}} , oldvalue: proxy {0: "1", __dep__: dep, __parent__: {…}} 20:17:44.729 index.js?afc7:40 2: newvalue: proxy {0: "1", __dep__: dep, __parent__: {…}} , oldvalue: proxy {0: "1", __dep__: dep, __parent__: {…}} 20:17:44.731 index.js?afc7:40 3: newvalue: proxy {0: "1", __dep__: dep, __parent__: {…}} , oldvalue: proxy {0: "1", __dep__: dep, __parent__: {…}} 20:17:44.734 index.js?afc7:40 4: newvalue: proxy {0: "1", 1: "1", __dep__: dep, __parent__: {…}} , oldvalue: proxy {0: "1", 1: "1", __dep__: dep, __parent__: {…}} 20:17:44.735 index.js?afc7:40 5: newvalue: proxy {0: proxy, 1: "1", 2: "1", __dep__: dep, __parent__: {…}} , oldvalue: proxy {0: proxy, 1: "1", 2: "1", __dep__: dep, __parent__: {…}} 20:17:44.735 index.js?afc7:40 6: newvalue: proxy {0: proxy, 1: "1", 2: "1", __dep__: dep, __parent__: {…}} , oldvalue: proxy {0: proxy, 1: "1", 2: "1", __dep__: dep, __parent__: {…}} 20:17:44.736 index.js?afc7:40 7: newvalue: proxy {0: proxy, 1: "1", 2: "1", __dep__: dep, __parent__: {…}} , oldvalue: proxy {0: proxy, 1: "1", 2: "1", __dep__: dep, __parent__: {…}} 20:17:44.737 index.js?afc7:40 8: newvalue: proxy {0: proxy, 1: "1", __dep__: dep, __parent__: {…}} , oldvalue: proxy {0: proxy, 1: "1", __dep__: dep, __parent__: {…}} 20:17:44.738 index.js?afc7:40 9: newvalue: proxy {0: "1", __dep__: dep, __parent__: {…}} , oldvalue: proxy {0: "1", __dep__: dep, __parent__: {…}} 20:17:44.738 index.js?afc7:40 10: newvalue: proxy {0: "1", __dep__: dep, __parent__: {…}} , oldvalue: proxy {0: "1", __dep__: dep, __parent__: {…}}
我们看到了es6 proxy后实现了object/array的检测,虽然还存在一些问题,但是基本的侦测变化的功能都已经具备了。
总结
以上所述是小编给大家介绍的es6 proxy实现vue的变化检测问题,希望对大家有所帮助