茶余饭后聊聊 Vue3.0 相应式数据那些事儿

Vue3.0 早年组件实例在初始化的时辰会将 data 整个工具变为可调查工具，通过递归的方法给每个 Key 行使Object.defineProperty 加上 getter 和 settter，假如是数组就重写署理数组工具的七个要领。而在 Vue3.0 中，将可相应式工具建设的权力交给了开拓者，开拓者可以通过袒露的 reactive, compted, effect 要领自界说本身必要相应式手段的数据，实例在初始化时不必要再去递归 data 工具了，从而低落了组件实例化的时刻。

• 低落了运行内存的行使

Vue3.0 早年世成相应式工具会对工具举办深度遍历，同时为每个 Key 天生一个 def 工具用来生涯 Key 的全部依靠项，当 Key 对应的 Value 变革的时辰关照依靠项举办 update。但假如这些依靠项在页面整个生命周期内不必要更新的时辰，这时 def 工具网络的依靠项不只没用并且还会占用内存，假如可以在初始化 data 的时辰忽略掉这些不会变革的值就好了。Vue3.0 通过袒露的 reactive 要领，开拓者可以选择性的建设可调查工具，到达镌汰依靠项的生涯，低落了运行内存的行使。

• Map、Set、WeakSet、WeakMap的监听

前面提到 Proxy 可以署理全部的工具，立马遐想到了 ES6 内里新增的荟萃 Map、Set， 聚合范例的支持得益于 Proxy 和 Reflect。讲真的这之前还真不知道 Proxy 这么刚啥都能署理，二话不说直接下手用 Proxy 署理了一个 map 试试水

let map = new Map([["name","zhengcaiyun"]]) 
let mapProxy = new Proxy(map, { 
  get(target, key, receiver) { 
    console.log("取值:",key) 
    return Reflect.get(target, key, receiver) 
  } 
}) 
mapProxy.get("name") 

Uncaught TypeError: Method Map.prototype.get called on incompatible receiver [object Object] 

一盆凉水泼来，报错了。原本 Map、Set 工具赋值、取值和他们内部的 this 指向有相关，但这里的 this 指向的是着实是 Proxy 工具，以是得这样干

let map = new Map([['name','wangyangyang']]) 
let mapProxy = new Proxy(map, { 
  get(target, key, receiver) { 
    var value = Reflect.get(...arguments) 
     console.log("取值:",...arguments) 
    return typeof value == 'function' ? value.bind(target) : value 
  } 
}) 
mapProxy.get("name") 

当获取的是一个函数的时辰，通过浸染域绑定的方法将原工具绑定到 Map、Set 工具上就好了。

Vue3.0 是怎样实现荟萃范例数据监听的?

眼尖的同窗看完上面这段代码会发明一个题目，荟萃是没有 set 要领，荟萃赋值用的是 add 操纵,那咋办呢?来看看那么 Vue3.0 是怎么处理赏罚的，上一段简化后的源码

function reactive(target: object) { 
  return createReactiveObject( 
    target, 
    rawToReactive, 
    reactiveToRaw, 
    mutableHandlers, 
    mutableCollectionHandlers 
  ) 
} 
 
function createReactiveObject( 
  target: any, 
  toProxy: WeakMap<any, any>, 
  toRaw: WeakMap<any, any>, 
  baseHandlers: ProxyHandler<any>, 
  collectionHandlers: ProxyHandler<any> 
) { 
  //collectionTypes = new Set<Function>([Set, Map, WeakMap, WeakSet]) 
  const handlers = collectionTypes.has(target.constructor) 
    ? collectionHandlers 
    : baseHandlers 
  //天生署理工具 
  observed = new Proxy(target, handlers) 
  toProxy.set(target, observed) 
  toRaw.set(observed, target) 
  if (!targetMap.has(target)) { 
    targetMap.set(target, new Map()) 
  } 
  return observed 
} 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!