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

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

// 用法示例  
import { createApp, h, nextTick } from 'vue'  
const app = createApp({  
  data() {  
    return {  
      ... 
     }  
  },  
  methods: {...},  
  computed: {...}  
  ...  
},  
    { username: 'Evan' })  
复制代码 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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

// 用法示例 
h('div', {}, [  
'Some text comes first.',  
h('h1', 'A headline'),  
h(MyComponent, {  
  someProp: 'foobar'  
})  
])  
复制代码 
1.
2.
3.
4.
5.
6.
7.
8.
9.

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

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

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

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

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

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

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

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

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

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

import { withDirectives, resolveDirective } from 'vue'  
const foo = resolveDirective('foo')  
const bar = resolveDirective('bar')  
return withDirectives(h('div'), [  
  [foo, this.x],  
  [bar, this.y]  
]) 
复制代码 
1.
2.
3.
4.
5.
6.
7.
8.

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

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

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

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

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

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

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

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

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

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