vue 2.7.5 → 2.7.8

package/src/compiler/codegen/index.ts

@@ -13,7 +13,7 @@ import {
   ASTText,
   CompilerOptions
 } from 'types/compiler'
-import { BindingMetadata } from 'sfc/types'
+import { BindingMetadata, BindingTypes } from 'sfc/types'
 
 type TransformFunction = (el: ASTElement, code: string) => string
 type DataGenFunction = (el: ASTElement) => string
@@ -95,18 +95,16 @@ export function genElement(el: ASTElement, state: CodegenState): string {
       code = genComponent(el.component, el, state)
     } else {
       let data
-      if (!el.plain || (el.pre && state.maybeComponent(el))) {
+      const maybeComponent = state.maybeComponent(el)
+      if (!el.plain || (el.pre && maybeComponent)) {
         data = genData(el, state)
       }
 
       let tag: string | undefined
       // check if this is a component in <script setup>
       const bindings = state.options.bindings
-      if (bindings && bindings.__isScriptSetup !== false) {
-        tag =
-          checkBindingType(bindings, el.tag) ||
-          checkBindingType(bindings, camelize(el.tag)) ||
-          checkBindingType(bindings, capitalize(camelize(el.tag)))
+      if (maybeComponent && bindings && bindings.__isScriptSetup !== false) {
+        tag = checkBindingType(bindings, el.tag)
       }
       if (!tag) tag = `'${el.tag}'`
 
@@ -126,9 +124,32 @@ export function genElement(el: ASTElement, state: CodegenState): string {
 }
 
 function checkBindingType(bindings: BindingMetadata, key: string) {
-  const type = bindings[key]
-  if (type && type.startsWith('setup')) {
-    return key
+  const camelName = camelize(key)
+  const PascalName = capitalize(camelName)
+  const checkType = (type) => {
+    if (bindings[key] === type) {
+      return key
+    }
+    if (bindings[camelName] === type) {
+      return camelName
+    }
+    if (bindings[PascalName] === type) {
+      return PascalName
+    }
+  }
+  const fromConst =
+    checkType(BindingTypes.SETUP_CONST) ||
+    checkType(BindingTypes.SETUP_REACTIVE_CONST)
+  if (fromConst) {
+    return fromConst
+  }
+
+  const fromMaybeRef =
+    checkType(BindingTypes.SETUP_LET) ||
+    checkType(BindingTypes.SETUP_REF) ||
+    checkType(BindingTypes.SETUP_MAYBE_REF)
+  if (fromMaybeRef) {
+    return fromMaybeRef
   }
 }
 

package/src/core/instance/inject.ts

@@ -1,8 +1,7 @@
 import { warn, hasSymbol, isFunction, isObject } from '../util/index'
 import { defineReactive, toggleObserving } from '../observer/index'
 import type { Component } from 'types/component'
-import { provide } from 'v3/apiInject'
-import { setCurrentInstance } from '../../v3/currentInstance'
+import { resolveProvided } from 'v3/apiInject'
 
 export function initProvide(vm: Component) {
   const provideOption = vm.$options.provide
@@ -13,12 +12,18 @@ export function initProvide(vm: Component) {
     if (!isObject(provided)) {
       return
     }
+    const source = resolveProvided(vm)
+    // IE9 doesn't support Object.getOwnPropertyDescriptors so we have to
+    // iterate the keys ourselves.
     const keys = hasSymbol ? Reflect.ownKeys(provided) : Object.keys(provided)
-    setCurrentInstance(vm)
     for (let i = 0; i < keys.length; i++) {
-      provide(keys[i], provided[keys[i]])
+      const key = keys[i]
+      Object.defineProperty(
+        source,
+        key,
+        Object.getOwnPropertyDescriptor(provided, key)!
+      )
     }
-    setCurrentInstance()
   }
 }
 

package/src/core/instance/lifecycle.ts

@@ -18,7 +18,7 @@ import {
   invokeWithErrorHandling
 } from '../util/index'
 import { currentInstance, setCurrentInstance } from 'v3/currentInstance'
-import { syncSetupAttrs } from 'v3/apiSetup'
+import { syncSetupProxy } from 'v3/apiSetup'
 
 export let activeInstance: any = null
 export let isUpdatingChildComponent: boolean = false
@@ -288,11 +288,12 @@ export function updateChildComponent(
     // force update if attrs are accessed and has changed since it may be
     // passed to a child component.
     if (
-      syncSetupAttrs(
+      syncSetupProxy(
         vm._attrsProxy,
         attrs,
         (prevVNode.data && prevVNode.data.attrs) || emptyObject,
-        vm
+        vm,
+        '$attrs'
       )
     ) {
       needsForceUpdate = true
@@ -300,7 +301,20 @@ export function updateChildComponent(
   }
   vm.$attrs = attrs
 
-  vm.$listeners = listeners || emptyObject
+  // update listeners
+  listeners = listeners || emptyObject
+  const prevListeners = vm.$options._parentListeners
+  if (vm._listenersProxy) {
+    syncSetupProxy(
+      vm._listenersProxy,
+      listeners,
+      prevListeners || emptyObject,
+      vm,
+      '$listeners'
+    )
+  }
+  vm.$listeners = vm.$options._parentListeners = listeners
+  updateComponentListeners(vm, listeners, prevListeners)
 
   // update props
   if (propsData && vm.$options.props) {
@@ -317,12 +331,6 @@ export function updateChildComponent(
     vm.$options.propsData = propsData
   }
 
-  // update listeners
-  listeners = listeners || emptyObject
-  const oldListeners = vm.$options._parentListeners
-  vm.$options._parentListeners = listeners
-  updateComponentListeners(vm, listeners, oldListeners)
-
   // resolve slots + force update if has children
   if (needsForceUpdate) {
     vm.$slots = resolveSlots(renderChildren, parentVnode.context)

package/src/core/instance/render.ts

@@ -25,7 +25,13 @@ export function initRender(vm: Component) {
   const parentVnode = (vm.$vnode = options._parentVnode!) // the placeholder node in parent tree
   const renderContext = parentVnode && (parentVnode.context as Component)
   vm.$slots = resolveSlots(options._renderChildren, renderContext)
-  vm.$scopedSlots = emptyObject
+  vm.$scopedSlots = parentVnode
+    ? normalizeScopedSlots(
+        vm.$parent!,
+        parentVnode.data!.scopedSlots,
+        vm.$slots
+      )
+    : emptyObject
   // bind the createElement fn to this instance
   // so that we get proper render context inside it.
   // args order: tag, data, children, normalizationType, alwaysNormalize
@@ -98,7 +104,7 @@ export function renderMixin(Vue: typeof Component) {
     const vm: Component = this
     const { render, _parentVnode } = vm.$options
 
-    if (_parentVnode) {
+    if (_parentVnode && vm._isMounted) {
       vm.$scopedSlots = normalizeScopedSlots(
         vm.$parent!,
         _parentVnode.data!.scopedSlots,

package/src/core/observer/index.ts

@@ -191,7 +191,7 @@ export function defineReactive(
       } else if (getter) {
         // #7981: for accessor properties without setter
         return
-      } else if (isRef(value) && !isRef(newVal)) {
+      } else if (!shallow && isRef(value) && !isRef(newVal)) {
         value.value = newVal
         return
       } else {

package/src/core/observer/scheduler.ts

@@ -59,6 +59,15 @@ if (inBrowser && !isIE) {
   }
 }
 
+const sortCompareFn = (a: Watcher, b: Watcher): number => {
+  if (a.post) {
+    if (!b.post) return 1
+  } else if (b.post) {
+    return -1
+  }
+  return a.id - b.id
+}
+
 /**
  * Flush both queues and run the watchers.
  */
@@ -75,7 +84,7 @@ function flushSchedulerQueue() {
   //    user watchers are created before the render watcher)
   // 3. If a component is destroyed during a parent component's watcher run,
   //    its watchers can be skipped.
-  queue.sort((a, b) => a.id - b.id)
+  queue.sort(sortCompareFn)
 
   // do not cache length because more watchers might be pushed
   // as we run existing watchers

package/src/core/observer/watcher.ts

@@ -58,6 +58,7 @@ export default class Watcher implements DepTarget {
   noRecurse?: boolean
   getter: Function
   value: any
+  post: boolean
 
   // dev only
   onTrack?: ((event: DebuggerEvent) => void) | undefined
@@ -93,6 +94,7 @@ export default class Watcher implements DepTarget {
     this.cb = cb
     this.id = ++uid // uid for batching
     this.active = true
+    this.post = false
     this.dirty = this.lazy // for lazy watchers
     this.deps = []
     this.newDeps = []

package/src/types/component.ts

@@ -111,6 +111,7 @@ export declare class Component {
   _setupProxy?: Record<string, any>
   _setupContext?: SetupContext
   _attrsProxy?: Record<string, any>
+  _listenersProxy?: Record<string, Function | Function[]>
   _slotsProxy?: Record<string, () => VNode[]>
   _preWatchers?: Watcher[]
 

package/src/v3/apiInject.ts

@@ -1,5 +1,6 @@
 import { isFunction, warn } from 'core/util'
 import { currentInstance } from './currentInstance'
+import type { Component } from 'types/component'
 
 export interface InjectionKey<T> extends Symbol {}
 
@@ -9,19 +10,23 @@ export function provide<T>(key: InjectionKey<T> | string | number, value: T) {
       warn(`provide() can only be used inside setup().`)
     }
   } else {
-    let provides = currentInstance._provided
-    // by default an instance inherits its parent's provides object
-    // but when it needs to provide values of its own, it creates its
-    // own provides object using parent provides object as prototype.
-    // this way in `inject` we can simply look up injections from direct
-    // parent and let the prototype chain do the work.
-    const parentProvides =
-      currentInstance.$parent && currentInstance.$parent._provided
-    if (parentProvides === provides) {
-      provides = currentInstance._provided = Object.create(parentProvides)
-    }
     // TS doesn't allow symbol as index type
-    provides[key as string] = value
+    resolveProvided(currentInstance)[key as string] = value
+  }
+}
+
+export function resolveProvided(vm: Component): Record<string, any> {
+  // by default an instance inherits its parent's provides object
+  // but when it needs to provide values of its own, it creates its
+  // own provides object using parent provides object as prototype.
+  // this way in `inject` we can simply look up injections from direct
+  // parent and let the prototype chain do the work.
+  const existing = vm._provided
+  const parentProvides = vm.$parent && vm.$parent._provided
+  if (parentProvides === existing) {
+    return (vm._provided = Object.create(parentProvides))
+  } else {
+    return existing
   }
 }
 

package/src/v3/apiSetup.ts

@@ -19,6 +19,7 @@ import { proxyWithRefUnwrap } from './reactivity/ref'
  */
 export interface SetupContext {
   attrs: Record<string, any>
+  listeners: Record<string, Function | Function[]>
   slots: Record<string, () => VNode[]>
   emit: (event: string, ...args: any[]) => any
   expose: (exposed: Record<string, any>) => void
@@ -87,7 +88,19 @@ function createSetupContext(vm: Component): SetupContext {
   let exposeCalled = false
   return {
     get attrs() {
-      return initAttrsProxy(vm)
+      if (!vm._attrsProxy) {
+        const proxy = (vm._attrsProxy = {})
+        def(proxy, '_v_attr_proxy', true)
+        syncSetupProxy(proxy, vm.$attrs, emptyObject, vm, '$attrs')
+      }
+      return vm._attrsProxy
+    },
+    get listeners() {
+      if (!vm._listenersProxy) {
+        const proxy = (vm._listenersProxy = {})
+        syncSetupProxy(proxy, vm.$listeners, emptyObject, vm, '$listeners')
+      }
+      return vm._listenersProxy
     },
     get slots() {
       return initSlotsProxy(vm)
@@ -109,26 +122,18 @@ function createSetupContext(vm: Component): SetupContext {
   }
 }
 
-function initAttrsProxy(vm: Component) {
-  if (!vm._attrsProxy) {
-    const proxy = (vm._attrsProxy = {})
-    def(proxy, '_v_attr_proxy', true)
-    syncSetupAttrs(proxy, vm.$attrs, emptyObject, vm)
-  }
-  return vm._attrsProxy
-}
-
-export function syncSetupAttrs(
+export function syncSetupProxy(
   to: any,
   from: any,
   prev: any,
-  instance: Component
+  instance: Component,
+  type: string
 ) {
   let changed = false
   for (const key in from) {
     if (!(key in to)) {
       changed = true
-      defineProxyAttr(to, key, instance)
+      defineProxyAttr(to, key, instance, type)
     } else if (from[key] !== prev[key]) {
       changed = true
     }
@@ -142,12 +147,17 @@ export function syncSetupAttrs(
   return changed
 }
 
-function defineProxyAttr(proxy: any, key: string, instance: Component) {
+function defineProxyAttr(
+  proxy: any,
+  key: string,
+  instance: Component,
+  type: string
+) {
   Object.defineProperty(proxy, key, {
     enumerable: true,
     configurable: true,
     get() {
-      return instance.$attrs[key]
+      return instance[type][key]
     }
   })
 }
@@ -171,19 +181,30 @@ export function syncSetupSlots(to: any, from: any) {
 }
 
 /**
- * @internal use manual type def
+ * @internal use manual type def because public setup context type relies on
+ * legacy VNode types
  */
 export function useSlots(): SetupContext['slots'] {
   return getContext().slots
 }
 
 /**
- * @internal use manual type def
+ * @internal use manual type def because public setup context type relies on
+ * legacy VNode types
  */
 export function useAttrs(): SetupContext['attrs'] {
   return getContext().attrs
 }
 
+/**
+ * Vue 2 only
+ * @internal use manual type def because public setup context type relies on
+ * legacy VNode types
+ */
+export function useListeners(): SetupContext['listeners'] {
+  return getContext().listeners
+}
+
 function getContext(): SetupContext {
   if (__DEV__ && !currentInstance) {
     warn(`useContext() called without active instance.`)

package/src/v3/apiWatch.ts

@@ -313,7 +313,7 @@ function doWatch(
   if (flush === 'sync') {
     watcher.update = watcher.run
   } else if (flush === 'post') {
-    watcher.id = Infinity
+    watcher.post = true
     watcher.update = () => queueWatcher(watcher)
   } else {
     // pre

package/src/v3/index.ts

@@ -77,7 +77,7 @@ export { provide, inject, InjectionKey } from './apiInject'
 
 export { h } from './h'
 export { getCurrentInstance } from './currentInstance'
-export { useSlots, useAttrs, mergeDefaults } from './apiSetup'
+export { useSlots, useAttrs, useListeners, mergeDefaults } from './apiSetup'
 export { nextTick } from 'core/util/next-tick'
 export { set, del } from 'core/observer'
 

package/types/index.d.ts

@@ -42,7 +42,7 @@ export * from './v3-setup-helpers'
 export { Data } from './common'
 export { SetupContext } from './v3-setup-context'
 export { defineComponent } from './v3-define-component'
-// export { defineAsyncComponent } from './defineAsyncComponent'
+export { defineAsyncComponent } from './v3-define-async-component'
 export {
   SetupFunction,
   // v2 already has option with same name and it's for a single computed

package/types/v3-component-public-instance.d.ts

@@ -179,9 +179,7 @@ interface Vue3Instance<
         ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
         : P & PublicProps
     >,
-    ComponentPublicInstance | null,
     ComponentPublicInstance,
-    ComponentPublicInstance[],
     Options & MergedComponentOptionsOverride,
     EmitFn<E>
   > {}

package/types/v3-generated.d.ts

@@ -364,6 +364,8 @@ export declare function useCssModule(name?: string): Record<string, string>;
  */
 export declare function useCssVars(getter: (vm: Record<string, any>, setupProxy: Record<string, any>) => Record<string, string>): void;
 
+/* Excluded from this release type: useListeners */
+
 /* Excluded from this release type: useSlots */
 
 /**

package/types/v3-manual-apis.d.ts

@@ -5,6 +5,6 @@ export function getCurrentInstance(): { proxy: Vue } | null
 
 export const h: CreateElement
 
-export function useAttrs(): SetupContext['attrs']
-
 export function useSlots(): SetupContext['slots']
+export function useAttrs(): SetupContext['attrs']
+export function useListeners(): SetupContext['listeners']

package/types/v3-setup-context.d.ts

@@ -31,6 +31,11 @@ export type EmitFn<
 
 export interface SetupContext<E extends EmitsOptions = {}> {
   attrs: Data
+  /**
+   * Equivalent of `this.$listeners`, which is Vue 2 only.
+   */
+  listeners: Record<string, Function | Function[]>
   slots: Slots
   emit: EmitFn<E>
+  expose(exposed?: Record<string, any>): void
 }

package/types/vue.d.ts

@@ -35,28 +35,33 @@ export interface CreateElement {
   ): VNode
 }
 
+type NeverFallback<T, D> = [T] extends [never] ? D : T
+
 export interface Vue<
   Data = Record<string, any>,
   Props = Record<string, any>,
-  Parent = never,
-  Root = never,
-  Children = never,
+  Instance = never,
   Options = never,
   Emit = (event: string, ...args: any[]) => Vue
 > {
   // properties with different types in defineComponent()
   readonly $data: Data
   readonly $props: Props
-  readonly $parent: Parent extends never ? Vue : Parent
-  readonly $root: Root extends never ? Vue : Root
-  readonly $children: Children extends never ? Vue[] : Children
-  readonly $options: ComponentOptions<Vue>
+  readonly $parent: NeverFallback<Instance, Vue> | null
+  readonly $root: NeverFallback<Instance, Vue>
+  readonly $children: NeverFallback<Instance, Vue>[]
+  readonly $options: NeverFallback<Options, ComponentOptions<Vue>>
   $emit: Emit
 
   // Vue 2 only or shared
   readonly $el: Element
   readonly $refs: {
-    [key: string]: Vue | Element | (Vue | Element)[] | undefined
+    [key: string]:
+      | NeverFallback<Instance, Vue>
+      | Vue
+      | Element
+      | (NeverFallback<Instance, Vue> | Vue | Element)[]
+      | undefined
   }
   readonly $slots: { [key: string]: VNode[] | undefined }
   readonly $scopedSlots: { [key: string]: NormalizedScopedSlot | undefined }