源码浅析-Vue3中的13个全局Api

开发 前端
不知不觉Vue-next[1]的版本已经来到了3.1.2,最近对照着源码学习Vue3的全局Api,边学习边整理了下来,希望可以和大家一起进步。

[[414054]]

 前言

不知不觉Vue-next[1]的版本已经来到了3.1.2,最近对照着源码学习Vue3的全局Api,边学习边整理了下来,希望可以和大家一起进步。

我们以官方定义、用法、源码浅析三个维度来一起看看它们。

下文是关于Vue3全局Api的内容,大家如果有更好的理解和想法,可以在评论区留言,每条我都会回复~

全局API

全局API是直接在Vue上挂载方法,在Vue中,全局API一共有13个。分别是:

  •  createapp 返回一个提供应用上下文的应用实例;
  •  h 返回一个”虚拟节点;
  •  definecomponent 返回options的对象,在TS下,会给予组件正确的参数类型推断;
  •  defineasynccomponent 创建一个只有在需要时才会加载的异步组件;
  •  resolvecomponent 按传入的组件名称解析 component;
  •  resolvedynamiccomponent 返回已解析的Component或新建的VNode;
  •  resolvedirective 通过其名称解析一个 directive;
  •  withdirectives 返回一个包含应用指令的 VNode;
  •  createrenderer 跨平台自定义渲染;
  •  nexttick 是将回调函数延迟在下一次dom更新数据后调用;
  •  mergeprops 将包含 VNode prop 的多个对象合并为一个单独的对象;
  •  usecssmodule 访问 CSS 模块;
  •  version 查看已安装的 Vue 的版本号;

createApp

官方定义:返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。

顾名思义,CreateApp 作为 vue 的启动函数,返回一个应用实例,每个 Vue 应用程序都首先使用以下函数创建一个新的应用程序实例,应用程序实例公开的大多数方法都返回相同的实例,可以链式调用。例如: 

  1. Vue.createApp({}).component('SearchInput', SearchInputComponent)  
  2. 复制代码 

用法

  •  第一个参数: 接收一个根组件选项
    •   第二个参数: 将根 prop 传递给应用程序 
  1. // 用法示例  
  2. import { createApp, h, nextTick } from 'vue'  
  3. const app = createApp({  
  4.   data() {  
  5.     return {  
  6.       ... 
  7.      }  
  8.   },  
  9.   methods: {...},  
  10.   computed: {...}  
  11.   ...  
  12. },  
  13.     { username: 'Evan' })  
  14. 复制代码 

源码浅析

GitHub地址:

  •  createApp():56行 - 102行内容 \[1\][2]
  •  ensureRenderer():35 行- 37行内容 \[2\][3]
  •  createRenderer():419 行- 424行内容 \[3\][4]
  •  baseCreateRenderer():448 行- 2418行 \[4\][5]
  •  app._component:174行\[5\][6] 
  1. // 源码位置上方[1]  
  2. export const createApp = ((...args) => {  
  3.     // 使用ensureRenderer().createApp() 来创建 app 对象  
  4.     // 源码位置上方[2]  
  5.     // -> ensureRenderer方法调用了来自runtime-core的createRenderer  
  6.     // 源码位置上方[3]  
  7.     // -> createRenderer(HostNode, HostElement),两个通用参数HostNode(主机环境中的节点)和HostElement(宿主环境中的元素),对应于宿主环境。  
  8.     // -> reateRenderer(使用(可选的)选项创建一个 Renderer 实例。),该方法返回了 baseCreateRenderer  
  9.     // 源码位置上方[4]  
  10.     // -> baseCreateRenderer方法最终返回 render hydrate createApp三个函数,生成的 render 传给 createAppAPI ,hydrate 为可选参数,ssr 的场景下会用到;  
  11.   const app = ensureRenderer().createApp(...args)  
  12.   if (__DEV__) {  
  13.      // DEV环境下,用于组件名称验证是否是原生标签或者svg属性标签  
  14.     injectNativeTagCheck(app)  
  15.      // DEV环境下,检查CompilerOptions如果有已弃用的属性,显示警告  
  16.     injectCompilerOptionsCheck(app)  
  17.   }  
  18.   const { mount } = app  
  19.   // 从创建的app对象中解构获取mount,改写mount方法后 返回app实例  
  20.   app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {  
  21.     // container 是真实的 DOM 元素,normalizeContainer方法使用document.querySelector处理传入的<containerOrSelector>参数,如果在DEV环境下元素不存在 或者 元素为影子DOM并且mode状态为closed,则返回相应的警告  
  22.      const container = normalizeContainer(containerOrSelector)  
  23.     // 如果不是真实的DOM元素则 return  
  24.     if (!container) return  
  25.      // 这里的app._component 其实就是全局API的createApp的第一个参数,源码位置在上方[5]  
  26.     const component = app._component  
  27.     // component不是函数 并且 没有不包含render、template  
  28.     if (!isFunction(component) && !component.render && !component.template) {  
  29.       // 不安全的情况  
  30.       // 原因:可能在dom模板中执行JS表达式。  
  31.       // 用户必须确保内dom模板是可信的。如果它是  
  32.       // 模板不应该包含任何用户数据。      
  33.         //  使用 DOM的innerHTML作为component.template 内容  
  34.       component.template = container.innerHTML  
  35.       // 2.挂载前检查,获得元素属性的集合遍历如果name不是v-cloak状态 并且属性名称包含v-、:、@ ,会给出vue文档链接提示  
  36.       if (__COMPAT__ && __DEV__) {  
  37.         for (let i = 0; i < container.attributes.length; i++) {  
  38.           const attr = container.attributes[i]  
  39.           if (attr.name !== 'v-cloak' && /^(v-|:|@)/.test(attr.name)) {  
  40.             compatUtils.warnDeprecation(  
  41.               DeprecationTypes.GLOBAL_MOUNT_CONTAINER,  
  42.               null  
  43.             )  
  44.             break  
  45.           }  
  46.         }  
  47.       }  
  48.     }  
  49.     // 挂载前清除内容  
  50.     container.innerHTML = ''  
  51.     // 真正的挂载 (元素, 是否复用[此处个人理解,仅供参考],是否为SVG元素)  
  52.     const proxy = mount(container, false, container instanceof SVGElement)  
  53.     if (container instanceof Element) {  
  54.       // 删除元素上的 v-cloak 指令  
  55.       container.removeAttribute('v-cloak')  
  56.       // 设置data-v-app属性  
  57.       container.setAttribute('data-v-app', '')  
  58.     }  
  59.     return proxy  
  60.   }  
  61.   return app  
  62. }) as CreateAppFunction<Element>  
  63. 复制代码 

h

官方定义:返回一个”虚拟节点“,通常缩写为 VNode:一个普通对象,其中包含向 Vue 描述它应在页面上渲染哪种节点的信息,包括所有子节点的描述。它的目的是用于手动编写的渲染函数;

    h是什么意思?根据祖师爷的回复,h 的含义如下:

It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".

它来自术语“hyperscript”,该术语常用于许多虚拟 dom 实现。“Hyperscript”本身代表“生成 HTML 结构的脚本”,因为 HTML 是“超文本标记语言”的首字母缩写词。

回复出处:github.com/vuejs/babel…[7]

其实h()函数和createVNode()函数都是创建dom节点,他们的作用是一样的,但是在VUE3中createVNode()函数的功能比h()函数要多且做了性能优化,渲染节点的速度也更快。

用法

  •  第一个参数: HTML 标签名、组件、异步组件或函数式组件。使用返回 null 的函数将渲染一个注释。此参数是必需的。
  •  第二个参数: 一个对象,与我们将在模板中使用的 attribute、prop、class 和、style和事件相对应。可选。
  •  第三个参数: 子代 VNode,使用 h() 生成,或者使用字符串来获取“文本 VNode”,或带有插槽的对象。可选。 
  1. // 用法示例 
  2. h('div', {}, [  
  3. 'Some text comes first.',  
  4. h('h1', 'A headline'),  
  5. h(MyComponent, {  
  6.   someProp: 'foobar'  
  7. })  
  8. ])  
  9. 复制代码 

源码浅析

GitHub地址:

  •  h:174行 - 196行 \[6\][8] 
  1. // 源码位置见上方[6]  
  2. export function h(type: any, propsOrChildren?: any, children?: any): VNode {  
  3.   const l = arguments.length  
  4.   // 如果参数是两个  
  5.   if (l === 2) {  
  6.       // 判断是否是对象,并且不为数组  
  7.     if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {  
  8.       // 所有VNode对象都有一个 __v_isVNode 属性,isVNode 方法也是根据这个属性来判断是否为VNode对象。  
  9.       if (isVNode(propsOrChildren)) {  
  10.         return createVNode(type, null, [propsOrChildren])  
  11.       }  
  12.       // 只包含属性不含有子元素    
  13.       return createVNode(type, propsOrChildren)  
  14.     } else {  
  15.       // 忽略props属性   
  16.       return createVNode(type, null, propsOrChildren)  
  17.     }  
  18.   } else { 
  19.      if (l > 3) {  
  20.       // Array.prototype.slice.call(arguments, 2),这句话的意思就是说把调用方法的参数截取出来,可以理解成是让arguments转换成一个数组对象,让arguments具有slice()方法 
  21.        children = Array.prototype.slice.call(arguments, 2) 
  22.      } else if (l === 3 && isVNode(children)) {  
  23.       // 如果参数长度等于3,并且第三个参数为VNode对象  
  24.       children = [children]  
  25.     }  
  26.     // h 函数内部的主要处理逻辑就是根据参数个数和参数类型,执行相应处理操作,但最终都是通过调用 createVNode 函数来创建 VNode 对象  
  27.     return createVNode(type, propsOrChildren, children)  
  28.   }  
  29.  
  30. 复制代码 

defineComponent

官方定义:defineComponent 只返回传递给它的对象。但是,就类型而言,返回的值有一个合成类型的构造函数,用于手动渲染函数、TSX 和 IDE 工具支持

definComponent主要是用来帮助Vue在TS下正确推断出setup()组件的参数类型

引入 defineComponent() 以正确推断 setup() 组件的参数类型;

defineComponent 可以正确适配无 props、数组 props 等形式;

用法

  •  **参数:**具有组件选项的对象或者是一个 setup 函数,函数名称将作为组件名称来使用 
  1. // 之前写Ts + vue,需要声明相关的数据类型。如下  
  2.  // 声明props和return的数据类型  
  3.  interface Data {  
  4.  [key: string]: unknown  
  5.  }  
  6.  // 使用的时候入参要加上声明,return也要加上声明  
  7.  export default {  
  8.  setup(props: Data): Data {  
  9.    // ...  
  10.    return {  
  11.      // ...  
  12.    }  
  13.  }  
  14.  }  
  15.  // 非常的繁琐,使用defineComponent 之后,就可以省略这些类型定义,defineComponent 可以接受显式的自定义props接口或从属性验证对象中自动推断;  
  16.  // 用法示例1:  
  17.  import { defineComponent } from 'vue'  
  18.  const MyComponent = defineComponent({  
  19.  data() {  
  20.    return { count: 1 }  
  21.  },  
  22.  methods: {  
  23.    increment() {  
  24.      this.count++  
  25.    }  
  26.  }  
  27.  })  
  28.  // 用法示例2:  
  29.  // 不只适用于 setup,只要是 Vue 本身的 API ,defineComponent 都可以自动帮你推导。  
  30.  import { defineComponent } from 'vue'  
  31.  export default defineComponent({  
  32.  setup (props, context) {  
  33.    // ...  
  34.    return {  
  35.      // ...  
  36.    }  
  37.  }  
  38.  })  
  39.  复制代码 

源码浅析

GitHub地址:源码文件位置[9] 

  1. ... 
  2. ...  
  3. ...  
  4. //  实际上这个 api 只是直接 return 传进来的 options,export default defineComponent({}) 是有点等价于export default {},目前看来这样做的最大作用只是限制 type, setup 必须是函数,props 必须是 undefined 或者 对象。 
  5. export function defineComponent(options: unknown) {  
  6.   return isFunction(options) ? { setup: options, name: options.name } : options  
  7.  
  8. 复制代码 

defineAsyncComponent

官方定义:创建一个只有在需要时才会加载的异步组件。

用法

参数:接受一个返回 Promise 的工厂函数。Promise 的 resolve 回调应该在服务端返回组件定义后被调用。 

  1. // 在 Vue 2.x 中,声明一个异步组件只需这样  
  2. const asyncModal = () => import('./Modal.vue')  
  3. // 或者 
  4.  const asyncModal = {  
  5.   component: () => import('./Modal.vue'),  
  6.   delay: 200,  
  7.   timeout: 3000,  
  8.   error: ErrorComponent,  
  9.   loading: LoadingComponent  
  10.  
  11. // 现在,在 Vue 3 中,由于函数式组件被定义为纯函数,因此异步组件的定义需要通过将其包裹在新的 defineAsyncComponent 助手方法中来显式地定义: 
  12.  import { defineAsyncComponent } from 'vue' 
  13.  import ErrorComponent from './components/ErrorComponent.vue' 
  14.  import LoadingComponent from './components/LoadingComponent.vue' 
  15.  // 不带选项的异步组件  
  16. const asyncModal = defineAsyncComponent(() => import('./Modal.vue')) 
  17. // 带选项的异步组件,对 2.x 所做的另一个更改是,component 选项现在被重命名为loader,以便准确地传达不能直接提供组件定义的信息。注意:defineAsyncComponent不能使用在Vue Router上! 
  18. const asyncModalWithOptions = defineAsyncComponent({  
  19.   loader: () => import('./Modal.vue'),  
  20.   delay: 200,  
  21.   timeout: 3000,  
  22.   errorComponent: ErrorComponent,  
  23.   loadingComponent: LoadingComponent  
  24. })  
  25. 复制代码 

源码浅析

GitHub地址:41行- 196行[10] 

  1. // 源码位置见上方  
  2. export function defineAsyncComponent<  
  3.   T extends Component = { new (): ComponentPublicInstance }  
  4. >(source: AsyncComponentLoader<T> | AsyncComponentOptions<T>): T {    
  5.   if (isFunction(source)) {  
  6.     source = { loader: source }  
  7.   }  
  8.  // 异步组件的参数  
  9.   const {  
  10.     loader,  
  11.     loadingComponent,  
  12.     errorComponent,  
  13.     delay = 200 
  14.     timeout, // undefined = never times out  
  15.     suspensible = true
  16.      onError: userOnError  
  17.   } = source 
  18.   let pendingRequest: Promise<ConcreteComponent> | nullnull = null  
  19.   let resolvedComp: ConcreteComponent | undefined 
  20.   let retries = 0  
  21.   // 重新尝试load得到组件内容  
  22.   const retry = () => {  
  23.     retries++  
  24.     pendingRequest = null  
  25.     return load()  
  26.   }  
  27.   const load = (): Promise<ConcreteComponent> => {  
  28.     let thisRequest: Promise<ConcreteComponent>  
  29.     return (  
  30.       // 如果pendingRequest 存在就return,否则实行loader()  
  31.       pendingRequest ||  
  32.       (thisRequest = pendingRequest = loader()  
  33.        // 失败场景处理  
  34.         .catch(err => { 
  35.            errerr = err instanceof Error ? err : new Error(String(err))  
  36.           if (userOnError) {  
  37.             // 对应文档中的 失败捕获回调函数 用户使用  
  38.             return new Promise((resolve, reject) => {  
  39.               const userRetry = () => resolve(retry())  
  40.               const userFail = () => reject(err)  
  41.               userOnError(err, userRetry, userFail, retries + 1)  
  42.             })  
  43.           } else {  
  44.             throw err  
  45.           }  
  46.         })  
  47.         .then((comp: any) => {  
  48.           // 个人理解:在thisRequest = pendingRequest = loader(),loader()最开始属于等待状态,赋值给pendingRequest、在thisRequest此刻他们是相等的等待状态,当进入then的时候pendingRequest已经发生了改变,所以返回pendingRequest 
  49.            if (thisRequest !== pendingRequest && pendingRequest) {  
  50.             return pendingRequest  
  51.           }  
  52.           // 如果在DEV环境则警告  
  53.           if (__DEV__ && !comp) {  
  54.             warn(  
  55.               `Async component loader resolved to undefined. ` +  
  56.                 `If you are using retry(), make sure to return its return value.`  
  57.             )  
  58.           }  
  59.           // interop module default  
  60.           if (  
  61.             comp &&  
  62.             (comp.__esModule || comp[Symbol.toStringTag] === 'Module')  
  63.           ) { 
  64.              compcomp = comp.default  
  65.           }  
  66.           // 如果在DEV环境则警告  
  67.           if (__DEV__ && comp && !isObject(comp) && !isFunction(comp)) {  
  68.             throw new Error(`Invalid async component load result: ${comp}`)  
  69.           }  
  70.           resolvedComp = comp  
  71.           return comp  
  72.         }))  
  73.     )  
  74.   } 
  75.   return defineComponent({  
  76.     __asyncLoader: load,  
  77.     // 异步组件统一名字  
  78.     name: 'AsyncComponentWrapper',  
  79.     // 组件有setup方法的走setup逻辑  
  80.     setup() {  
  81.       const instance = currentInstance 
  82.       // already resolved  
  83.       if (resolvedComp) {  
  84.         return () => createInnerComp(resolvedComp!, instance)  
  85.       } 
  86.       const onError = (err: Error) => {  
  87.         pendingRequest = null  
  88.         handleError(  
  89.           err,  
  90.           instance,  
  91.           ErrorCodes.ASYNC_COMPONENT_LOADER,  
  92.           !errorComponent /* do not throw in dev if user provided error component */  
  93.         )  
  94.       }  
  95.       // suspense-controlled or SSR.  
  96.       // 对应文档中如果父组件是一个 suspense 那么只返回promise结果 其余的控制交给 suspense 处理即可  
  97.       if (  
  98.         (__FEATURE_SUSPENSE__ && suspensible && instance.suspense) ||  
  99.         (__NODE_JS__ && isInSSRComponentSetup)  
  100.       ) {  
  101.         return load()  
  102.           .then(comp => {  
  103.             return () => createInnerComp(comp, instance)  
  104.           })  
  105.           .catch(err => {  
  106.             onError(err)  
  107.             return () =>  
  108.               errorComponent  
  109.                 ? createVNode(errorComponent as ConcreteComponent, {  
  110.                     error: err  
  111.                   })  
  112.                 : null  
  113.           })  
  114.       }  
  115.       const loaded = ref(false)  
  116.       const error = ref()  
  117.       const delayed = ref(!!delay)  
  118.       if (delay) {  
  119.         setTimeout(() => {  
  120.           delayed.value = false  
  121.         }, delay)  
  122.       }  
  123.       if (timeout != null) {  
  124.         setTimeout(() => {  
  125.           if (!loaded.value && !error.value) {  
  126.             const err = new Error(  
  127.               `Async component timed out after ${timeout}ms.`  
  128.             ) 
  129.              onError(err)  
  130.             errerror.value = err  
  131.           }  
  132.         }, timeout)  
  133.       }  
  134.       load()  
  135.         .then(() => {  
  136.           // promise成功返回后触发trigger导致组件更新 重新渲染组件 只不过此时我们已经得到组件内容  
  137.           loaded.value = true  
  138.         })  
  139.         .catch(err => {  
  140.           onError(err)  
  141.           errerror.value = err  
  142.         })   
  143.       // 返回的函数会被当做组件实例的 render 函数  
  144.       return () => {  
  145.         // render初始执行触发 loaded的依赖收集   
  146.         if (loaded.value && resolvedComp) {  
  147.           return createInnerComp(resolvedComp, instance)  
  148.         } else if (error.value && errorComponent) {  
  149.           return createVNode(errorComponent as ConcreteComponent, {  
  150.             error: error.value  
  151.           })  
  152.         } else if (loadingComponent && !delayed.value) {  
  153.           return createVNode(loadingComponent as ConcreteComponent)  
  154.         }  
  155.       }  
  156.     }  
  157.   }) as any  
  158.  
  159. 复制代码 

resolveComponent

官方定义:如果在当前应用实例中可用,则允许按名称解析 component,返回一个 Component。如果没有找到,则返回接收的参数 name。

用法

参数:已加载的组件的名称 

  1. const app = createApp({})  
  2. app.component('MyComponent', {  
  3.   /* ... */  
  4. })  
  5. import { resolveComponent } from 'vue'  
  6. render() {  
  7.   const MyComponent = resolveComponent('MyComponent')  
  8.  
  9. 复制代码 

源码浅析

GitHub地址:

  •  resolveComponent():21行- 27行 \[7\][11]
  •  resolveAsset():62行- 123行 \[8\][12] 
  1. // 接收一个name参数,主要还是在resolveAsset方法中做了处理,源码位置见上方[7]  
  2. export function resolveComponent(  
  3.   name: string,  
  4.   maybeSelfReference?: boolean  
  5. ): ConcreteComponent | string {  
  6.   return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name  
  7.  
  8. // resolveAsset源码在上方地址[8]  
  9. function resolveAsset(  
  10.   type: AssetTypes,  
  11.   name: string,  
  12.   warnMissing = true 
  13.   maybeSelfReference = false  
  14. ) {  
  15.   // 寻找当前渲染实例,不存在则为当前实例  
  16.   const instance = currentRenderingInstance || currentInstance  
  17.   if (instance) {  
  18.     const Component = instance.type  
  19.     // 自我名称具有最高的优先级  
  20.     if (type === COMPONENTS) {  
  21.       // getComponentName 首先判断传入的Component参数是不是函数,如果是函数优先使用.displayName属性,其次使用.name  
  22.       const selfName = getComponentName(Component)  
  23.       if (  
  24.         // camelize 使用replace方法,正则/-(\w)/gname,匹配后toUpperCase() 转换成大写  
  25.         // capitalize函数:str.charAt(0).toUpperCase() + str.slice(1) 首字母大写 + 处理后的字符  
  26.         selfName &&  
  27.         (selfName === name ||  
  28.           selfName === camelize(name) ||  
  29.           selfName === capitalize(camelize(name)))  
  30.       ) {  
  31.         return Component  
  32.       }  
  33.     }  
  34.     const res =  
  35.       // 注册  
  36.       // 首先检查实例[type],它被解析为选项API  
  37.       resolve(instance[type] || (Component as ComponentOptions)[type], name) ||  
  38.       // 全局注册  
  39.       resolve(instance.appContext[type], name)  
  40.     if (!res && maybeSelfReference) {  
  41.       return Component  
  42.     }  
  43.     if (__DEV__ && warnMissing && !res) {  
  44.       warn(`Failed to resolve ${type.slice(0, -1)}: ${name}`)  
  45.     }  
  46.     return res  
  47.   } else if (__DEV__) {  
  48.     // 如果实例不存在,并且在DEV环境警告:can only be used in render() or setup()  
  49.     warn(  
  50.       `resolve${capitalize(type.slice(0, -1))} ` +  
  51.         `can only be used in render() or setup().`  
  52.     )  
  53.   }  
  54.  
  55. 复制代码 

resolveDynamicComponent

官方定义:返回已解析的 Component 或新创建的 VNode,其中组件名称作为节点标签。如果找不到 Component,将发出警告。

用法

参数:接受一个参数:component 

  1. import { resolveDynamicComponent } from 'vue'  
  2. render () { 
  3.   const MyComponent = resolveDynamicComponent('MyComponent')  
  4.  
  5. 复制代码 

源码浅析

GitHub地址:

  •  resolveDirective():43行 - 48行内容 \[9\][13]
  •  resolveAsset():62行- 123行[14] 
  1. // 源码位置位于上方[9]位置处  
  2. // 根据该函数的名称,我们可以知道它用于解析动态组件,在 resolveDynamicComponent 函数内部,若 component 参数是字符串类型,则会调用前面介绍的 resolveAsset 方法来解析组件,  
  3. // 如果 resolveAsset 函数获取不到对应的组件,则会返回当前 component 参数的值。比如 resolveDynamicComponent('div') 将返回 'div' 字符串  
  4. // 源码见上方[1]地址  
  5. export function resolveDynamicComponent(component: unknown): VNodeTypes {  
  6.   if (isString(component)) {  
  7.     return resolveAsset(COMPONENTS, component, false) || component  
  8.   } else {  
  9.     // 无效类型将引发警告,如果 component 参数非字符串类型,则会返回 component || NULL_DYNAMIC_COMPONENT 这行语句的执行结果,其中 NULL_DYNAMIC_COMPONENT 的值是一个 Symbol 对象。 
  10.      return (component || NULL_DYNAMIC_COMPONENT) as any  
  11.   }  
  12.  
  13. //  resolveAsset函数解析见上方[8]位置处  
  14. 复制代码 

resolveDirective

如果在当前应用实例中可用,则允许通过其名称解析一个 directive。返回一个 Directive。如果没有找到,则返回 undefined。

用法

  •  第一个参数:已加载的指令的名称。

源码浅析

GitHub地址:

  •  resolveDirective():43行 - 48行内容 \[10\][15]
  •  resolveAsset():62行- 123行[16] 
  1. /**  
  2.  * 源码位置见上方[10]位置处  
  3.  */  
  4. export function resolveDirective(name: string): Directive | undefined {  
  5.   // 然后调用前面介绍的 resolveAsset 方法来解析组件,resolveAsset函数解析见上方[8]位置处  
  6.   return resolveAsset(DIRECTIVES, name)  
  7.  
  8. 复制代码 

withDirectives

官方定义:允许将指令应用于 VNode。返回一个包含应用指令的 VNode。

用法

  •  第一个参数:一个虚拟节点,通常使用 h() 创建
    •  第二个参数:一个指令数组,每个指令本身都是一个数组,最多可以定义 4 个索引。 
  1. import { withDirectives, resolveDirective } from 'vue'  
  2. const foo = resolveDirective('foo')  
  3. const bar = resolveDirective('bar')  
  4. return withDirectives(h('div'), [  
  5.   [foo, this.x],  
  6.   [bar, this.y]  
  7. ]) 
  8. 复制代码 

源码浅析

GitHub地址:

  •  resolveDirective():85行 - 114内容 \[11\][17] 
  1. // 源码链接在上方[11]位置处  
  2. export function withDirectives<T extends VNode> 
  3.   vnode: T,  
  4.   directives: DirectiveArguments  
  5. ): T { 
  6.    // 获取当前实例  
  7.   const internalInstance = currentRenderingInstance  
  8.   if (internalInstance === null) {  
  9.     // 如果在 render 函数外面使用 withDirectives() 则会抛出异常:  
  10.     __DEV__ && warn(`withDirectives can only be used inside render functions.`)  
  11.     return vnode  
  12.   }  
  13.   const instance = internalInstance.proxy  
  14.   // 在 vnode 上绑定 dirs 属性,并且遍历传入的 directives 数组  
  15.   const bindings: DirectiveBinding[] = vnode.dirs || (vnode.dirs = []) 
  16.    for (let i = 0; i < directives.length; i++) {  
  17.     let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i]  
  18.     if (isFunction(dir)) {  
  19.       dir = {  
  20.         mounted: dir,  
  21.         updated: dir  
  22.       } as ObjectDirective  
  23.     }  
  24.     bindings.push({  
  25.       dir,  
  26.       instance,  
  27.       value,  
  28.       oldValue: void 0,  
  29.       arg,  
  30.       modifiers  
  31.     })  
  32.   }  
  33.   return vnode  
  34.   
  35.  复制代码 

createRenderer

官方定义:createRenderer 函数接受两个泛型参数:HostNode 和 HostElement,对应于宿主环境中的 Node 和 Element 类型。

用法

  •  第一个参数:HostNode宿主环境中的节点。
  •  第二个参数:Element宿主环境中的元素。 
  1. // 对于 runtime-dom,HostNode 将是 DOM Node 接口,HostElement 将是 DOM Element 接口。  
  2. // 自定义渲染器可以传入特定于平台的类型,如下所示:  
  3. // createRenderer(HostNode, HostElement),两个通用参数HostNode(主机环境中的节点)和HostElement(宿主环境中的元素),对应于宿主环境。  
  4. // reateRenderer(使用(可选的)选项创建一个 Renderer 实例。),该方法返回了 baseCreateRenderer  
  5. export function createRenderer<  
  6.   HostNodeHostNode = RendererNode 
  7.   HostElement = RendererElement  
  8. >(options: RendererOptions<HostNode, HostElement>) {  
  9.   return baseCreateRenderer<HostNode, HostElement>(options)  
  10.  复制代码 

源码解析

  •  createRenderer():419 行- 424行内容 \[3\][18]
  •  baseCreateRenderer():448 行- 2418行 \[4\][19] 
  1. export function createRenderer<  
  2.   HostNodeHostNode = RendererNode 
  3.   HostElement = RendererElement  
  4. >(options: RendererOptions<HostNode, HostElement>) {  
  5.   return baseCreateRenderer<HostNode, HostElement>(options)  
  6.  
  7. // baseCreateRenderer这个放2000行的左右的代码量,这里就完整不贴过来了,里面是渲染的核心代码,从平台特性 options 取出相关 API,实现了 patch、处理节点、处理组件、更新组件、安装组件实例等等方法,最终返回了一个renderer对象。 
  8. function baseCreateRenderer(  
  9.   options: RendererOptions,  
  10.   createHydrationFns?: typeof createHydrationFunctions  
  11. ): any {  
  12.   // compile-time feature flags check  
  13.   if (__ESM_BUNDLER__ && !__TEST__) {  
  14.     initFeatureFlags()  
  15.   }  
  16.   if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {  
  17.     const target = getGlobalThis()  
  18.     target.__VUE__ = true  
  19.     setDevtoolsHook(target.__VUE_DEVTOOLS_GLOBAL_HOOK__)  
  20.   }  
  21.   const {  
  22.     insert: hostInsert, 
  23.     remove: hostRemove,  
  24.     patchProp: hostPatchProp,  
  25.     forcePatchProp: hostForcePatchProp,  
  26.     createElement: hostCreateElement,  
  27.     createText: hostCreateText, 
  28.     createComment: hostCreateComment,  
  29.     setText: hostSetText,  
  30.     setElementText: hostSetElementText, 
  31.     parentNode: hostParentNode,  
  32.     nextSibling: hostNextSibling,  
  33.     setScopeId: hostSetScopeId = NOOP 
  34.     cloneNode: hostCloneNode,  
  35.     insertStaticContent: hostInsertStaticContent  
  36.   } = options  
  37.  ...  
  38.  ...  
  39.     ... 
  40.    // 返回 render hydrate createApp三个函数,生成的 render 传给 createAppAPI ,hydrate 为可选参数,ssr 的场景下会用到;  
  41.   return {  
  42.     render,  
  43.     hydrate,  
  44.     createApp: createAppAPI(render, hydrate)  
  45.   }  
  46.  
  47. 复制代码 

nextTick

官方定义:将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。 

  1. import { createApp, nextTick } from 'vue'  
  2. const app = createApp({  
  3.   setup() {  
  4.     const message = ref('Hello!')  
  5.     const changeMessage = async newMessage => {  
  6.       message.value = newMessage  
  7.       await nextTick()  
  8.       console.log('Now DOM is updated')  
  9.     }  
  10.   }  
  11. })  
  12. 复制代码 

源码浅析

GitHub地址:

  •  nextTick():42行 - 48行内容[20] 
  1. // 源码位置在上方  
  2. // 这里直接创建一个异步任务,但是改变dom属性也是异步策略,怎么保证dom加载完成  
  3. // Vue2.x是 会判断浏览器是否支持promise属性 -> 是否支持MutationObserver -> 是否支持setImmediate  -> 都不支持使用setTimeout,Vue3不再支持IE11,所以nextTick直接使用Promise 
  4. // Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。 
  5. export function nextTick( 
  6.   this: ComponentPublicInstance | void,  
  7.   fn?: () => void  
  8. ): Promise<void> {  
  9.   const p = currentFlushPromise || resolvedPromise  
  10.   return fn ? p.then(this ? fn.bind(this) : fn) : p  
  11.  
  12. // 你设置vm.someData = 'new value',该组件不会立即重新渲染。当刷新队列时,组件会在事件循环队列清空时的下一个“tick”更新。如果你想在 DOM 状态更新后做点什 ,可以在数据变化之后立即使用Vue.nextTick(callback) 。 
  13. 复制代码 

mergeProps

官方定义:将包含 VNode prop 的多个对象合并为一个单独的对象。其返回的是一个新创建的对象,而作为参数传递的对象则不会被修改。

用法

参数:可以传递不限数量的对象 

  1. import { h, mergeProps } from 'vue'  
  2. export default {  
  3.   inheritAttrs: false,  
  4.   render() {  
  5.     const props = mergeProps({  
  6.       // 该 class 将与 $attrs 中的其他 class 合并。  
  7.       class: 'active'  
  8.     }, this.$attrs)  
  9.     return h('div', props)  
  10.   }  
  11.  
  12. 复制代码 

源码浅析

GitHub地址:

  •  mergeProps():687行 - 712行[21] 
  1. export function mergeProps(...args: (Data & VNodeProps)[]) {  
  2.   // extend就是Object.assign方法, ret合并第一个参数为对象  
  3.   const ret = extend({}, args[0])  
  4.   // 遍历args参数  
  5.   for (let i = 1; i < args.length; i++) {  
  6.     const toMerge = args[i]  
  7.     for (const key in toMerge) {  
  8.       if (key === 'class') {  
  9.         // 合并class  
  10.         if (ret.class !== toMerge.class) { 
  11.           ret.class = normalizeClass([ret.class, toMerge.class])  
  12.         } 
  13.        } else if (key === 'style') {  
  14.         // 合并style  
  15.         ret.style = normalizeStyle([ret.style, toMerge.style])  
  16.       } else if (isOn(key)) {、  
  17.        // 判断是不是以 on开头的  
  18.         const existing = ret[key]  
  19.         const incoming = toMerge[key]  
  20.         if (existing !== incoming) {  
  21.           // 如果第一个参数中不存在,则合并,否则新增  
  22.           ret[key] = existing  
  23.             ? [].concat(existing as any, incoming as any)  
  24.             : incoming  
  25.         }  
  26.       } else if (key !== '') {  
  27.         // key不为空则添加属性  
  28.         ret[key] = toMerge[key]  
  29.       }  
  30.     }  
  31.   }  
  32.   return ret  
  33.  
  34. 复制代码 

useCssModule

官方定义:允许在 `setup`[22] 的单文件组件[23]函数中访问 CSS 模块。

用法

  •   参数:CSS 模块的名称。默认为 '$style' 
  1. // useCssModule 只能在 render 或 setup 函数中使用。  
  2. // 这里的name不止可以填写$style,  
  3. /* 
  4. *<style module="aaa"  
  5. * ...  
  6. *</style>  
  7. */ 
  8. // 这样就可以使用 const style = useCssModule(‘aaa'),来获取相应内容 
  9. <script>  
  10. import { h, useCssModule } from 'vue'  
  11. export default {  
  12.   setup () {  
  13.     const style = useCssModule()  
  14.     return () => h('div', {  
  15.       class: style.success  
  16.     }, 'Task complete!')  
  17.   }  
  18. </script>  
  19. <style module>  
  20. .success {  
  21.   color: #090;  
  22.  
  23. </style>  
  24. // 在 <style> 上添加 module 后, $style的计算属性就会被自动注入组件。  
  25. <style module>  
  26. .six  
  27.  color: red;  
  28.  
  29. .one  
  30.  font-size:62px; 
  31.  
  32. </style>  
  33. // 添加model后可以直接使用$style绑定属性  
  34. <template>  
  35.  <div>  
  36.   <p :class="$style.red">  
  37.    hello red!  
  38.   </p>  
  39.  </div>  
  40. </template>  
  41. 复制代码 

源码解析

GitHub地址:

useCssModule():1行 \- 30行[24] 

  1. import { warn, getCurrentInstance } from '@vue/runtime-core'  
  2. import { EMPTY_OBJ } from '@vue/shared'  
  3. // 取出 this.$style   
  4. export function useCssModule(name = '$style'): Record<string, string> {  
  5.   /* 如果是istanbul覆盖率测试则跳出 */  
  6.   if (!__GLOBAL__) {  
  7.     // 获取当前实例  
  8.     const instance = getCurrentInstance()!  
  9.     if (!instance) {  
  10.       // useCssModule 只能在 render 或 setup 函数中使用。  
  11.       __DEV__ && warn(`useCssModule must be called inside setup()`)  
  12.       // EMPTY_OBJ是使用Object.freeze()冻结对象  
  13.       return EMPTY_OBJ 
  14.      } 
  15.      const modules = instance.type.__cssModules  
  16.     // 如果不存在css模块,警告  
  17.     if (!modules) {  
  18.       __DEV__ && warn(`Current instance does not have CSS modules injected.`)  
  19.       return EMPTY_OBJ  
  20.     }  
  21.     const mod = modules[name]  
  22.     // 如果不存在未找到name的css模块,警告  
  23.     if (!mod) {  
  24.       __DEV__ &&  
  25.         warn(`Current instance does not have CSS module named "${name}".`)  
  26.       return EMPTY_OBJ  
  27.     }  
  28.     return mod as Record<string, string>  
  29.   } else { 
  30.      if (__DEV__) {  
  31.       warn(`useCssModule() is not supported in the global build.`)  
  32.     }  
  33.     return EMPTY_OBJ  
  34.   }  
  35.  
  36. 复制代码 

version

官方定义:以字符串形式提供已安装的 Vue 的版本号。 

  1. // vue-next/packages/vue/package.json 中的version 为3.1.2,使用.split('.')[0],得出3  
  2. const version = Number(Vue.version.split('.')[0])  
  3. if (version === 3) {  
  4.   // Vue 3  
  5. } else if (version === 2) {  
  6.   // Vue 2  
  7. } else {  
  8.   // 不支持的 Vue 的版本  
  9.  
  10. 复制代码 

结尾

好了,以上就是本篇全部文章内容啦。 

 

责任编辑:庞桂玉 来源: 前端教程
相关推荐

2020-09-19 21:15:26

Composition

2020-07-22 18:04:00

VueAPI共享

2021-09-22 07:57:23

Vue3 插件Vue应用

2021-03-22 10:05:25

开源技术 项目

2021-12-08 09:09:33

Vue 3 Computed Vue2

2021-11-26 05:59:31

Vue3 插件Vue应用

2021-12-16 08:27:54

Vue3 插件Vue应用

2020-09-29 08:26:17

Vue3中新增的API

2022-01-26 11:00:58

源码层面Vue3

2021-12-01 08:11:44

Vue3 插件Vue应用

2024-01-16 12:46:00

Vue3API开发

2022-06-13 08:39:21

Vue3API

2020-09-17 07:08:04

TypescriptVue3前端

2024-03-01 11:32:22

Vue3APIVue.js

2022-07-20 11:13:05

前端JSONVue3

2021-09-27 06:29:47

Vue3 响应式原理Vue应用

2021-11-30 08:19:43

Vue3 插件Vue应用

2023-11-28 09:03:59

Vue.jsJavaScript

2024-03-21 08:34:49

Vue3WebSocketHTTP

2024-03-12 12:27:00

Vue 3前端开发
点赞
收藏

51CTO技术栈公众号