@vue/composition-api 解析

2021-08-12 1115

前言

组合式 API 是 vue3 提出的一个新的开发方式，而在 vue2 中我们可以使用新的组合式 API 进行组件开发。本篇通过一个例子，来分析这个插件是如何提供功能。

关于该插件的安装、使用，可以直接阅读文档。

安装

我们从最开始安装分析，一探究竟。

vue.use

按照文档所提到的，我们必须通过 Vue.use() 进行安装：

// vue.use 安装
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
复制代码

我们先看入口文件：

// index.js
import type Vue from 'vue'
import { Data, SetupFunction } from './component'
import { Plugin } from './install'
 
export default Plugin
 
// auto install when using CDN
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(Plugin)
}
复制代码

可以知道我们 Vue.use 时，传入的就是 install 文件中的 Plugin 对象。

// install.ts 折叠源码
export function install(Vue: VueConstructor) {
  if (isVueRegistered(Vue)) {
    if (__DEV__) {
      warn(
        '[vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once.'
      )
    }
    return
  }
 
  if (__DEV__) {
    if (Vue.version) {
      if (Vue.version[0] !== '2' || Vue.version[1] !== '.') {
        warn(
          `[vue-composition-api] only works with Vue 2, v${Vue.version} found.`
        )
      }
    } else {
      warn('[vue-composition-api] no Vue version found')
    }
  }
 
  Vue.config.optionMergeStrategies.setup = function (
    parent: Function,
    child: Function
  ) {
    return function mergedSetupFn(props: any, context: any) {
      return mergeData(
        typeof parent === 'function' ? parent(props, context) || {} : undefined,
        typeof child === 'function' ? child(props, context) || {} : undefined
      )
    }
  }
 
  setVueConstructor(Vue)
  mixin(Vue)
}
 
export const Plugin = {
  install: (Vue: VueConstructor) => install(Vue),
}
复制代码

install

通过上面的代码和 Vue.use 可知，我们安装时其实就是调用了 install 方法，先分析一波 install。根据代码块及功能可以分成三个部分：

前两个大 if 的开发 check 部分
关于 setup 合并策略
通过 mixin 混入插件关于组合式 API 的处理逻辑

第一部分中的第一个 if 是为了确保该 install 方法只被调用一次，避免浪费性能；第二个 if 则是确保vue版本为2.x。不过这里有个关于第一个if的小问题：多次注册插件时，Vue.use 自己本身会进行重复处理——安装过的插件再次注册时，不会调用 install 方法（Vue.use代码见下）。那么这个 if 的目的是啥？

// Vue.use 部分源码
Vue.use = function (plugin: Function | Object) {
  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
  if (installedPlugins.indexOf(plugin) > -1) {
    return this
  }
 
  // additional parameters
  const args = toArray(arguments, 1)
  args.unshift(this)
  if (typeof plugin.install === 'function') {
    plugin.install.apply(plugin, args)
  } else if (typeof plugin === 'function') {
    plugin.apply(null, args)
  }
  installedPlugins.push(plugin)
  return this
}
复制代码

根据上面代码可知 Vue.use 实际上还是传入 vue 并调用插件的 install 方法，那么如果有大神（或者是奇葩？）绕过 Vue.use 直接调用，那么这个 if 的判断就生效了。如下方代码，此时第二个 install 会判断重复后，抛出错误

// 直接调用 install
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import App from './App.vue'
 
Vue.config.productionTip = false
 
VueCompositionAPI.install(Vue)
VueCompositionAPI.install(Vue)
复制代码

报错：

第二部分的合并策略是“Vue.config.optionMergeStrategies”这个代码块。Vue 提供的这个能力很生僻，我们日常的开发中几乎不会主动接触到。先上文档：

这是用来定义属性的合并行为。比如例子中的 extend 在调用时，会执行 mergeOptions。

// Vue.extend
Vue.extend = function (extendOptions) {
    const Super = this
    extendOptions = extendOptions || {}
    Sub.options = mergeOptions(
      Super.options,
      extendOptions
    )
}
复制代码

而 mergeOptions 里关于 _my_option的相关如下：

const strats = config.optionMergeStrategies
function mergeOptions (parent, child, vm){
  for (key in parent) {
    mergeField(key)
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
 
 
  function mergeField (key) {
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
}
复制代码

这里的 parent 就是 Super.options 也就是 Vue.options，而 child 就是 extendOptions 也就是我们传入的 { _my_option: 1 }。在这里使用了两个 for 循环，确保父子元素种所有的 key 都会执行到 mergeField，而第二个 for 循环中的 if 判断确保不会执行两次，保证了正确性及性能。而 mergeField 则是最终执行策略的地方。从 strats 中获取到我们定义的方法，把对应参数传入并执行，在这里就是：

// demo执行
strat(undefined, 1, vm, '_my_option') // return 2
复制代码

顺便一提，Vue.mixin 的实现就是 mergeOptions，也就是说当我们使用了 mixin 且里面具有 setup 属性时，会执行到上述合并策略。

Vue.mixin = function (mixin) {
  this.options = mergeOptions(this.options, mixin)
  return this
}
复制代码

而我们插件中相关的策略也很简单，获取好定义的父子 setup，然后合并成一个新的，在调用时会分别执行父子 setup，并通过 mergeData 方法合并返回：

// optionMergeStrategies.setup
Vue.config.optionMergeStrategies.setup = function (
  parent: Function,
  child: Function
) {
  return function mergedSetupFn(props: any, context: any) {
    return mergeData(
      typeof parent === 'function' ? parent(props, context) || {} : undefined,
      typeof child === 'function' ? child(props, context) || {} : undefined
    )
  }
}
复制代码

第三部分则是通过调用 mixin 方法向 vue 中混入一些事件，下面是 mixin 的定义：

function mixin(Vue) {
  Vue.mixin({
    beforeCreate: functionApiInit,
    mounted(this: ComponentInstance) {
      updateTemplateRef(this)
    },
    updated(this: ComponentInstance) {
      updateTemplateRef(this)
    }
  })
   
  function functionApiInit() {}
  function initSetup() {}
  // 省略...
}
复制代码

可以看到 mixin 内部调用了 Vue.mixin 来想 beforeCreate、mounted、updated 等生命周期混入事件。这样就完成 install 的执行， Vue.use(VueCompositionAPI) 也到此结束。

初始化 — functionApiInit

functionApiInit 执行

我们知道在new Vue 时，会执行组件的 beforeCreate 生命周期。此时刚才通过 Vue.mixin 注入的函数 “functionApiInit”开始执行。

function Vue (options) {
  this._init(options)
}
Vue.prototype._init = function (options) {
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate') // 触发 beforeCreate 生命周期，执行 functionApiInit
  initInjections(vm) // resolve injections before data/props
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created')
}
复制代码

该方法也很清晰，分别暂存了组件最开始的 render方法和 data方法（我们平常写的 data 是一个函数），然后在这基础上又扩展了一下这两个方法，达到类似钩子的目的。

function functionApiInit(this: ComponentInstance) {
  const vm = this
  const $options = vm.$options
  const { setup, render } = $options
 
  if (render) {
    // keep currentInstance accessible for createElement
    $options.render = function (...args: any): any {
      return activateCurrentInstance(vm, () => render.apply(this, args))
    }
  }
 
  if (!setup) {
    return
  }
  if (typeof setup !== 'function') {
    if (__DEV__) {
      warn(
        'The "setup" option should be a function that returns a object in component definitions.',
        vm
      )
    }
    return
  }
 
  const { data } = $options
  // wrapper the data option, so we can invoke setup before data get resolved
  $options.data = function wrappedData() {
    initSetup(vm, vm.$props)
    return typeof data === 'function'
      ? (data as (
          this: ComponentInstance,
          x: ComponentInstance
        ) => object).call(vm, vm)
      : data || {}
  }
}
复制代码

虽然是先扩展的 render，但在 new Vue 的实际执行中会优先执行下方扩展的方法 “wrappedData”。因为 data 的执行是在 new Vue 时发生，而 render 的执行在 $mount 中。所以我们这里就按照执行顺序来看看如何扩展我们的 wrappedData。

wrappedData 这里只是简单执行了 initSetup 方法，对原先的 data 做了判断。这里是因为 Vue 执行时拿到的 data 已经是 wrappedData 这个函数而不是用户编写的 data，所以关于原 data 的处理移交在了 wrappedData 中。可以说 99%的逻辑都在 initSetup 中。我们接下来看这个方法。

setup 调用及处理

这块是通过 initSetup 函数实现的，代码很长且仅有几行是这里不用关心的（可自行研究），整体上可以跟着注释走一遍。

function initSetup(vm: ComponentInstance, props: Record<any, any> = {}) {
  // 获取定义好的 setup
  const setup = vm.$options.setup!
  // 创建 setup 方法接收的第二个参数 context，主流程中使用不上，先忽略
  const ctx = createSetupContext(vm)
 
  // fake reactive for `toRefs(props)`
  // porps 相关，主流成可先忽略（毕竟可以不写 props...）
  def(props, '__ob__', createObserver())
 
  // resolve scopedSlots and slots to functions
  // slots 相关，同 props 先忽略
  // @ts-expect-error
  resolveScopedSlots(vm, ctx.slots)
 
  let binding: ReturnType<SetupFunction<Data, Data>> | undefined | null
  // 执行 setup
  activateCurrentInstance(vm, () => {
    // make props to be fake reactive, this is for `toRefs(props)`
    binding = setup(props, ctx)
  })
 
  // 以下都是根据 setup 返回值，进行的一些处理
  if (!binding) return
  if (isFunction(binding)) {  // setup 可以返回一个渲染函数（render）
    // keep typescript happy with the binding type.
    const bindingFunc = binding
    // keep currentInstance accessible for createElement
    // 获取到渲染函数后，手动添加再 vue 实例上
    vm.$options.render = () => {
      // @ts-expect-error
      resolveScopedSlots(vm, ctx.slots)
      return activateCurrentInstance(vm, () => bindingFunc())
    }
    return
  } else if (isPlainObject(binding)) { // setup 返回的是一个普通对象
    if (isReactive(binding)) { // 如果返回的是通过 reactive 方法定义的对象，需要通过 toRefs 结构
      binding = toRefs(binding) as Data
    }
     
    // 用于 slots 及 $refs ，先忽略
    vmStateManager.set(vm, 'rawBindings', binding)
    const bindingObj = binding
 
    // 遍历返回值，做一些处理
    Object.keys(bindingObj).forEach((name) => {
      let bindingValue: any = bindingObj[name]
 
      if (!isRef(bindingValue)) {
        if (!isReactive(bindingValue)) {
          if (isFunction(bindingValue)) {
            bindingValue = bindingValue.bind(vm)
          } else if (!isObject(bindingValue)) {
            bindingValue = ref(bindingValue)
          } else if (hasReactiveArrayChild(bindingValue)) {
            // creates a custom reactive properties without make the object explicitly reactive
            // NOTE we should try to avoid this, better implementation needed
            customReactive(bindingValue)
          }
        } else if (isArray(bindingValue)) {
          bindingValue = ref(bindingValue)
        }
      }
      asVmProperty(vm, name, bindingValue)
    })
 
    return
  }
  // 不是对象和方法时，在开发环境下抛错
  if (__DEV__) {
    assert(
      false,
      `"setup" must return a "Object" or a "Function", got "${Object.prototype.toString
        .call(binding)
        .slice(8, -1)}"`
    )
  }
}
复制代码

我们先聚焦到 setup 的执行。setup 包裹在 activateCurrentInstance 方法中，activateCurrentInstance 目的是为了设置当前的实例。类似我们平常写的交换a、b变量的值。setup 在调用前，会先获取 currentInstance 变量并赋值给 preVm，最开始时currentInstance 为 null。接着再把 currentInstance 设置成当前的 vue 实例，于是我们变可以在 setup 通过插件提供的 getCurrentInstance 方法获取到当前实例。在执行完毕后，又通过 setCurrentInstance(preVm) 把 currentInstance 重置为null。所以印证了文档中所说的，只能在 setup 及生命周期（不在本篇重点）中使用 getCurrentInstance 方法。

// setup执行
activateCurrentInstance(vm, () => {
  // make props to be fake reactive, this is for `toRefs(props)`
  binding = setup(props, ctx)
})
 
function activateCurrentInstance(vm, fn, onError) {
  let preVm = getCurrentVue2Instance()
  setCurrentInstance(vm)
  try {
    return fn(vm)
  } catch (err) {
    if (onError) {
      onError(err)
    } else {
      throw err
    }
  } finally {
    setCurrentInstance(preVm)
  }
}
 
 
let currentInstance = null
 
 
function setCurrentInstance(vm) {
  // currentInstance?.$scopedSlots
  currentInstance = vm
}
 
 
function getCurrentVue2Instance() {
  return currentInstance
}
 
 
function getCurrentInstance() {
  if (currentInstance) {
    return toVue3ComponentInstance(currentInstance)
  }
  return null
}
复制代码

这里有个思考，为什么需要在最后把 currentInstance 设置为 null？我们写了一个点击事件，并在相关的事件代码里调用了getCurrentInstance 。如果在 setup 调用重置为 null ，那么在该事件里就可能导致获取到错误的 currentInstance。于是就置为null 用来避免这个问题。（个人想法，期待指正）。

setup 内部可能会执行的东西有很多，比如通过 ref 定义一个响应式变量，这块放在后续单独说。

当获取完 setup 的返回值 binding 后，会根据其类型来做处理。如果返回函数，则说明这个 setup 返回的是一个渲染函数，便把放回值赋值给 vm.$options.render 供挂载时调用。如果返回的是一个对象，则会做一些相应式处理，这块内容和响应式相关，我们后续和响应式一块看。

// setup 返回对象

if (isReactive(binding)) {
  binding = toRefs(binding) as Data
}
 
vmStateManager.set(vm, 'rawBindings', binding)
const bindingObj = binding
 
Object.keys(bindingObj).forEach((name) => {
  let bindingValue: any = bindingObj[name]
 
  if (!isRef(bindingValue)) {
    if (!isReactive(bindingValue)) {
      if (isFunction(bindingValue)) {
        bindingValue = bindingValue.bind(vm)
      } else if (!isObject(bindingValue)) {
        bindingValue = ref(bindingValue)
      } else if (hasReactiveArrayChild(bindingValue)) {
        // creates a custom reactive properties without make the object explicitly reactive
        // NOTE we should try to avoid this, better implementation needed
        customReactive(bindingValue)
      }
    } else if (isArray(bindingValue)) {
      bindingValue = ref(bindingValue)
    }
  }
  asVmProperty(vm, name, bindingValue)
})
复制代码

我们这里只看重点函数 “asVmProperty”。我们知道 setup 返回的是一个对象 (赋值给了 binding / bindingObj)，且里面的所有属性都能在 vue 的其他选项中使用。那么这块是如何实现的呢？

访问 setup 返回值 — asVmProperty 实现

这个函数执行后，我们就可以在 template 模版及 vue 选项中访问到 setup 的返回值，的下面是“asVmProperty” 这个函数的实现：

function asVmProperty(vm, propName, propValue) {
  const props = vm.$options.props
  if (!(propName in vm) && !(props && hasOwn(props, propName))) {
    if (isRef(propValue)) {
      proxy(vm, propName, {
        get: () => propValue.value,
        set: (val: unknown) => {
          propValue.value = val
        },
      })
    } else {
      proxy(vm, propName, {
        get: () => {
          if (isReactive(propValue)) {
            ;(propValue as any).__ob__.dep.depend()
          }
          return propValue
        },
        set: (val: any) => {
          propValue = val
        },
      })
    }
  }
}
function proxy(target, key, { get, set }) {
  Object.defineProperty(target, key, {
    enumerable: true,
    configurable: true,
    get: get || noopFn,
    set: set || noopFn,
  })
}
复制代码

函数很短，这里有3个处理逻辑：

普通属性的 get 和 set 正常返回
如果是 ref 类型的属性（通过 ref 创建），通过 vm.xxx 访问/修改时，访问/修改 ref 的 value 属性
代理 reactive 类型的属性（通过 reactive 创建），reactive 返回的是一个响应式对象。当访问这个对象时，需要调用响应式对象种的 depend 收集watcher（观察者），以便数据更新时通知 watcher 进行更新。

总之 asVmProperty 是拿到 setup 返回值中的一个键值对后，再通过 Object.defineProperty 劫持了 this（是vm，也就是组件实例）中访问改键值对的 get 和 set，这样我们便可以通过 this.xxx 访问到 setup 中return 出去的属性。

而模版访问也同理，因为 template 编译成 render 后，上面的变量都实际会编译成 _vm.xxx，而 _vm 就是 this ，也就是组件实例。

结语

创作不易，如果对大家有所帮助，希望大家点赞支持，有什么问题也可以在评论区里讨论😄～

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: http://github.crmeb.net/u/defu 不胜感激！

来自 “开源独尊 ” ，链接: https://ym.baisou.ltd/post/847.html

微信关注我们

原文链接：https://my.oschina.net/u/5079097/blog/5178538

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

HDFS——写文件中的异常处理

记得看过一本书，里面是这么写的，软件开发中的二八原则，80%的时间运行的是正常流程，20%的时间是异常流程。而实际代码中，80%的代码是在处理异常逻辑，而正常流程只占20%。由此可见，异常处理是很重要的一块内容。本文就以原生的JAVA客户端为例，聊聊HDFS里写文件过程中的异常处理。先来简单回顾下HDFS的写文件流程，如下图所示：客户端向NN申请block，NN处理请求后需要将操作写入JN中。随后，客户端向DN建立连接发送数据，最后向NN同步block的信息。详细流程戳这里。整个流程中，JN、NN、不同的DN出现异常，均可能导致写异常或失败。【JN异常】假如在客户端addBlock之前，JN就出现了异常，那么addBlock会失败，因此block会写失败。而假如在客户端成功addBlock后，JN出现了异常，例如停止所有的JN，会怎样呢？实测发现，首先两个NN均未重启，但都停止提供服务，其用于rpc通信的端口也没有处于监听状态。其次，客户端一开始并没有报错，还在持续的向dn写入数据，从DN节点的rbw目录中，可以观察到block文件大小在持续递增，也就是说文件在不断的...

2021-08-11

718

作者：予涛途坦这个夏天，没什么能够比一场酣畅淋漓的奥运比赛来的过瘾。但是，在视频平台直播观看比赛也有痛点：“卡顿” 和 “延时”。受限于不同地域、复杂的网络情况、传输速度等原因，当您还在为赛点焦灼的时候，隔壁已经传来欢呼声，观赛兴致瞬间全无。为了打造更加流畅稳定低延时的直播体验，越来越多企业关注低延时直播技术应用。阿里云低延时直播RTS（Real-time Streaming）是在视频直播的基础上，进行全链路延时监控、CDN传输协议改造、UDP等底层技术优化，通过集成直播播放端SDK，支持千万级并发场景下的节点间毫秒级延时直播能力，弥补了传统直播3~6秒延时的问题，保障低延时、低卡顿、秒开流畅的极致直播观看体验。为了能够降低直播的端到端延时，2020 年阿里云正式推出全球实时传输网络 GRTN (Global Real Time Network) ，是部署在边缘云节点之上的超低延时、全分布式下沉的通信级流媒体传输网络，用于支持视频会议、视频直播、实时音视频等服务。要使用 GRTN 提供的短延迟 / 实时传输服务，客户端可以通过浏览器的 webrtc 能力接入，也可以自行开发客户...

2021-08-12

512

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。