澳门百老汇游戏 服务器常用软件

澳门百老汇游戏报道Vue3.0数据响应式原理详解_澳门百老汇游戏官网资讯

 更新时间:2019年10月09日 14:27:46   作者:方防访放   我要议论
这篇文章主要介绍了Vue3.0数据响应式原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有肯定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

基于Vue3.0公布在GitHub上的第一版源码(2019.10.05)整理

预备知识

  1. ES6 Proxy,整个响应式系统的基础。
  2. 新的composition-API的基本使用,当前还没有中文文档,能够先通过这个仓库(composition-api-rfc)了解,里面也有对应的在线文档。

先把Vue3.0跑起来

先把vue-next仓库的代码clone下来,安装依赖然后构建一下,vue的package下的dist目录下找到构建的脚本,引入脚本即可。
下面一个简单计数器的DEMO:

<!DOCTYPE html>
<html lang="en">
<body>
 <div id='app'></div>
</body>
<script src="./dist/vue.global.js"></script>
<script>
const { createApp, reactive, computed } = Vue;

const RootComponent = {
 template: `
  <button @click="increment">
   Count is: {{ state.count }}
  </button>
 `,
 setup() {
  const state = reactive({
   count: 0,
  })

  function increment() {
   state.count++
  }

  return {
   state,
   increment
  }
 }
}

createApp().mount(RootComponent, '#app')
</script>
</html>

template和之前一样,同样Vue3也撑腰手写render的写法,template和render同时存在的情况,优先render。

setup选项是新增的主要变动,顾名思义,setup函数会在组件挂载前(beforeCreate和created生命周期之间)运行一次,类似组件初始化的作用,setup需要返回一个工具或者函数。返回工具会被赋值给组件实例的renderContext,在组件的模板作用域能够被访问到,类似data的返回值。返回函数会被当做是组件的render。具体能够细看文档。

reactive的作用是将工具包装成响应式工具,通过Proxy代理后的工具。

上面的计数器的例子,在组件的setup函数中,创建了一个响应式工具state包含一个count属性。然后创建了一个increment递增的函数,最后将state和increment返回给作用域,这样template里的button按钮就能访问到increment函数绑定到点击的回调,count也能显示在按钮上。我们点击按钮,按钮上的数值就能跟着递增。

下面切入正题,我们就来探究下按钮上count值跟着响应式更新的原理

数据结构

首先列一下主要的一些数据结构,先列在这里,后面提到能够翻回来看看。

ReactiveEffect 一个Function工具,用于执行组件的挂载和更新。

interface ReactiveEffect {
 (): any
 isEffect: true
 active: boolean
 raw: Function // 具体执行的函数
 deps: Array<Dep>
 computed?: boolean
 scheduler?: (run: Function) => void
 onTrack?: (event: DebuggerEvent) => void
 onTrigger?: (event: DebuggerEvent) => void
 onStop?: () => void
}

targetMap 类似 {target -> key -> dep}的一个Map结构,用于缓存一切响应式工具和依赖收集。

export type Dep = Set<ReactiveEffect>
export type KeyToDepMap = Map<string | symbol, Dep>
export const targetMap: WeakMap<any, KeyToDepMap> = new WeakMap()

Proxy代理拦截

reactive函数执行,会将传入的target工具通过Proxy包装,拦截它的get,set等,并将代理的target缓存到targetMap,targetMap.set(target, new Map())。

代理的get的时刻会挪用一个track函数,而set会挪用一个triger函数。分别对应依赖收集和触发更新。

// Proxy get 简化
function get(target: any, key: string | symbol, receiver: any) {
 // 通过key拿到原始值res
 const res = Reflect.get(target, key, receiver)
 // 过滤不需要代理的情况
 // ...
 // 依赖收集
 track(target, OperationTypes.GET, key)
 // 如果取到的值是个工具,将工具再代理包装一下
 // Proxy只能代理工具第一层级
 return isObject(res) ? reactive(res) : res
}

// Proxy set 简化
function set(
 target: any,
 key: string | symbol,
 value: any,
 receiver: any
): boolean {
 // 一些不需要代理设置的场景
 // ...

 // 设置原始工具的值
 const result = Reflect.set(target, key, value, receiver)
 // 幸免反复trigger的逻辑
 // ...
 // 触发通知更新
 trigger(target, '更新的类型, 新增key或更新key', key)
 return result
}

依赖收集和触发更新

组件在render阶段,视图会读取数据工具上的值进行渲染,此时便触发了Proxy的get,由此触发对应的track函数,记载下了对应的ReactiveEffect,也就是常说的依赖收集。

ReactiveEffect本来就能够看作是组件的更新(mount是特别的update),数据的变更触发trigger,trigger遍历挪用track收集的对应的数据的ReactiveEffect,也就是对应有关联的组件的更新。

trigger触发的组件的更新,在render阶段又触发了新一轮的track依赖收集,更新依赖。

// 简化的 track
function track(
 target: any,
 type: OperationTypes,
 key?: string | symbol
) {
 // 只有在依赖收集阶段才进行依赖收集
 // 除了render,别的场景也可能会触发Proxy的get,但不需要进行依赖收集
 // activeReactiveEffectStack栈顶包装了当前render的组件的mount和update的逻辑
 const effect = activeReactiveEffectStack[activeReactiveEffectStack.length - 1]
 // 如果effect为空,说明当前不在render阶段
 if (effect) {
  // ...
  // =====>初始化对应{target -> key -> dep}的结构
  let depsMap = targetMap.get(target)
  if (depsMap === void 0) {
   targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key as string | symbol)
  if (!dep) {
   depsMap.set(key as string | symbol, (dep = new Set()))
  }
  // <=====初始化对应{target -> key -> dep}的结构
  // 依赖列表里如果没有,add
  if (!dep.has(effect)) {
   // 这里将effect作为依赖,缓存到依赖列表
   dep.add(effect)
   effect.deps.push(dep)
  }
 }
}

// 简化的trigger
function trigger(
 target: any,
 type: OperationTypes,
 key?: string | symbol,
 extraInfo?: any
) {
 // 猎取对应target在track进程中缓存的依赖
 const depsMap = targetMap.get(target)

 const effects: Set<ReactiveEffect> = new Set()
 // 省略分类逻辑
 depsMap.forEach(dep => {
  // 将effect分类过滤添加到effects
 })
 
 const run = (effect: ReactiveEffect) => {
  // 有个异程序度的进程,nextTick
  scheduleRun(effect, target, type, key, extraInfo)
 }

 effects.forEach(run)
}

大致流程:

总结

现在的代码只有新特性的实现,并且ES6+TS的组合可读性大大提高,编辑器撑腰也很好,所以相对会好读很多。这里只是简单的理了一下vue 3.0 reactive的整体流程,细节还有很多地方值得学习,继续加油。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多撑腰澳门百老汇游戏。

您可能感兴趣的文章:

  • Vue3.0
  • 数据响应式

相关文章

最新议论

微信 百家乐现金平台排名 在线工具
条评论