vue 2.7.4 → 2.7.5

package/packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "2.7.4",
+  "version": "2.7.5",
   "description": "compiler-sfc for Vue 2",
   "main": "dist/compiler-sfc.js",
   "types": "dist/compiler-sfc.d.ts",

package/src/core/components/keep-alive.ts

@@ -3,6 +3,7 @@ import { getFirstComponentChild } from 'core/vdom/helpers/index'
 import type VNode from 'core/vdom/vnode'
 import type { VNodeComponentOptions } from 'types/vnode'
 import type { Component } from 'types/component'
+import { getComponentName } from '../vdom/create-component'
 
 type CacheEntry = {
   name?: string
@@ -12,8 +13,8 @@ type CacheEntry = {
 
 type CacheEntryMap = Record<string, CacheEntry | null>
 
-function getComponentName(opts?: VNodeComponentOptions): string | null {
-  return opts && (opts.Ctor.options.name || opts.tag)
+function _getComponentName(opts?: VNodeComponentOptions): string | null {
+  return opts && (getComponentName(opts.Ctor.options as any) || opts.tag)
 }
 
 function matches(
@@ -81,7 +82,7 @@ export default {
       if (vnodeToCache) {
         const { tag, componentInstance, componentOptions } = vnodeToCache
         cache[keyToCache] = {
-          name: getComponentName(componentOptions),
+          name: _getComponentName(componentOptions),
           tag,
           componentInstance
         }
@@ -126,7 +127,7 @@ export default {
     const componentOptions = vnode && vnode.componentOptions
     if (componentOptions) {
       // check pattern
-      const name = getComponentName(componentOptions)
+      const name = _getComponentName(componentOptions)
       const { include, exclude } = this
       if (
         // not included

package/src/core/global-api/extend.ts

@@ -3,6 +3,7 @@ import type { Component } from 'types/component'
 import type { GlobalAPI } from 'types/global-api'
 import { defineComputed, proxy } from '../instance/state'
 import { extend, mergeOptions, validateComponentName } from '../util/index'
+import { getComponentName } from '../vdom/create-component'
 
 export function initExtend(Vue: GlobalAPI) {
   /**
@@ -25,7 +26,8 @@ export function initExtend(Vue: GlobalAPI) {
       return cachedCtors[SuperId]
     }
 
-    const name = extendOptions.name || Super.options.name
+    const name =
+      getComponentName(extendOptions) || getComponentName(Super.options)
     if (__DEV__ && name) {
       validateComponentName(name)
     }

package/src/core/instance/init.ts

@@ -58,7 +58,7 @@ export function initMixin(Vue: typeof Component) {
     initLifecycle(vm)
     initEvents(vm)
     initRender(vm)
-    callHook(vm, 'beforeCreate')
+    callHook(vm, 'beforeCreate', undefined, false /* setContext */)
     initInjections(vm) // resolve injections before data/props
     initState(vm)
     initProvide(vm) // resolve provide after data/props

package/src/core/instance/lifecycle.ts

@@ -375,11 +375,16 @@ export function deactivateChildComponent(vm: Component, direct?: boolean) {
   }
 }
 
-export function callHook(vm: Component, hook: string, args?: any[]) {
+export function callHook(
+  vm: Component,
+  hook: string,
+  args?: any[],
+  setContext = true
+) {
   // #7573 disable dep collection when invoking lifecycle hooks
   pushTarget()
   const prev = currentInstance
-  setCurrentInstance(vm)
+  setContext && setCurrentInstance(vm)
   const handlers = vm.$options[hook]
   const info = `${hook} hook`
   if (handlers) {
@@ -390,6 +395,6 @@ export function callHook(vm: Component, hook: string, args?: any[]) {
   if (vm._hasHookEvent) {
     vm.$emit('hook:' + hook)
   }
-  setCurrentInstance(prev)
+  setContext && setCurrentInstance(prev)
   popTarget()
 }

package/src/core/observer/traverse.ts

@@ -1,6 +1,7 @@
 import { _Set as Set, isObject, isArray } from '../util/index'
 import type { SimpleSet } from '../util/index'
 import VNode from '../vdom/vnode'
+import { isRef } from '../../v3'
 
 const seenObjects = new Set()
 
@@ -35,6 +36,8 @@ function _traverse(val: any, seen: SimpleSet) {
   if (isA) {
     i = val.length
     while (i--) _traverse(val[i], seen)
+  } else if (isRef(val)) {
+    _traverse(val.value, seen)
   } else {
     keys = Object.keys(val)
     i = keys.length

package/src/core/util/debug.ts

@@ -2,6 +2,7 @@ import config from '../config'
 import { noop, isArray, isFunction } from 'shared/util'
 import type { Component } from 'types/component'
 import { currentInstance } from 'v3/currentInstance'
+import { getComponentName } from '../vdom/create-component'
 
 export let warn: (msg: string, vm?: Component | null) => void = noop
 export let tip = noop
@@ -40,7 +41,7 @@ if (__DEV__) {
         : vm._isVue
         ? vm.$options || (vm.constructor as any).options
         : vm
-    let name = options.name || options._componentTag
+    let name = getComponentName(options)
     const file = options.__file
     if (!name && file) {
       const match = file.match(/([^/\\]+)\.vue$/)

package/src/core/vdom/create-component.ts

@@ -28,6 +28,10 @@ import type {
 import type { Component } from 'types/component'
 import type { ComponentOptions, InternalComponentOptions } from 'types/options'
 
+export function getComponentName(options: ComponentOptions) {
+  return options.name || options.__name || options._componentTag
+}
+
 // inline hooks to be invoked on component VNodes during patch
 const componentVNodeHooks = {
   init(vnode: VNodeWithData, hydrating: boolean): boolean | void {
@@ -188,7 +192,7 @@ export function createComponent(
 
   // return a placeholder vnode
   // @ts-expect-error
-  const name = Ctor.options.name || tag
+  const name = getComponentName(Ctor.options) || tag
   const vnode = new VNode(
     // @ts-expect-error
     `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,

package/src/platforms/web/runtime/components/transition-group.ts

@@ -23,6 +23,7 @@ import {
 } from 'web/runtime/transition-util'
 import VNode from 'core/vdom/vnode'
 import { VNodeWithData } from 'types/vnode'
+import { getComponentName } from 'core/vdom/create-component'
 
 const props = extend(
   {
@@ -72,7 +73,7 @@ export default {
         } else if (__DEV__) {
           const opts = c.componentOptions
           const name: string = opts
-            ? opts.Ctor.options.name || opts.tag || ''
+            ? getComponentName(opts.Ctor.options as any) || opts.tag || ''
             : c.tag
           warn(`<transition-group> children must be keyed: <${name}>`)
         }

package/src/v3/apiWatch.ts

@@ -196,12 +196,10 @@ function doWatch(
     getter = () => source.value
     forceTrigger = isShallow(source)
   } else if (isReactive(source)) {
-    getter = isArray(source)
-      ? () => {
-          ;(source as any).__ob__.dep.depend()
-          return source
-        }
-      : () => source
+    getter = () => {
+      ;(source as any).__ob__.dep.depend()
+      return source
+    }
     deep = true
   } else if (isArray(source)) {
     isMultiSource = true

package/src/v3/reactivity/ref.ts

@@ -68,7 +68,7 @@ function createRef(rawValue: unknown, shallow: boolean) {
   }
   const ref: any = {}
   def(ref, RefFlag, true)
-  def(ref, ReactiveFlags.IS_SHALLOW, true)
+  def(ref, ReactiveFlags.IS_SHALLOW, shallow)
   def(
     ref,
     'dep',
@@ -119,7 +119,16 @@ export function proxyWithRefUnwrap(
   Object.defineProperty(target, key, {
     enumerable: true,
     configurable: true,
-    get: () => unref(source[key]),
+    get: () => {
+      const val = source[key]
+      if (isRef(val)) {
+        return val.value
+      } else {
+        const ob = val && val.__ob__
+        if (ob) ob.dep.depend()
+        return val
+      }
+    },
     set: value => {
       const oldValue = source[key]
       if (isRef(oldValue) && !isRef(value)) {

package/types/options.d.ts

@@ -219,6 +219,8 @@ export interface ComponentOptions<
   parent?: Vue
   mixins?: (ComponentOptions<Vue> | typeof Vue)[]
   name?: string
+  // for SFC auto name inference w/ ts-loader check
+  __name?: string
   // TODO: support properly inferred 'extends'
   extends?: ComponentOptions<Vue> | typeof Vue
   delimiters?: [string, string]

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

@@ -5,7 +5,7 @@ import {
 } from './v3-generated'
 import { UnionToIntersection } from './common'
 
-import { Vue, Vue2Instance, VueConstructor } from './vue'
+import { Vue, VueConstructor } from './vue'
 import {
   ComputedOptions,
   MethodOptions,
@@ -13,8 +13,7 @@ import {
   ComponentOptionsMixin,
   ComponentOptionsBase
 } from './v3-component-options'
-import { EmitFn, EmitsOptions, Slots } from './v3-setup-context'
-import { VNode } from './vnode'
+import { EmitFn, EmitsOptions } from './v3-setup-context'
 
 /**
  * Custom properties added to component instances in any way and can be accessed through `this`
@@ -173,18 +172,19 @@ interface Vue3Instance<
   Defaults,
   MakeDefaultsOptional,
   Options
-> extends Vue2Instance {
-  $data: D
-  readonly $props: Readonly<
-    MakeDefaultsOptional extends true
-      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
-      : P & PublicProps
-  >
-  readonly $root: ComponentPublicInstance | null
-  readonly $parent: ComponentPublicInstance | null
-  readonly $emit: EmitFn<E>
-  readonly $options: Options & MergedComponentOptionsOverride
-}
+> extends Vue<
+    D,
+    Readonly<
+      MakeDefaultsOptional extends true
+        ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
+        : P & PublicProps
+    >,
+    ComponentPublicInstance | null,
+    ComponentPublicInstance,
+    ComponentPublicInstance[],
+    Options & MergedComponentOptionsOverride,
+    EmitFn<E>
+  > {}
 
 type MergedHook<T = () => void> = T | T[]
 

package/types/vue.d.ts

@@ -35,17 +35,25 @@ export interface CreateElement {
   ): VNode
 }
 
-export interface Vue extends Vue2Instance {
-  readonly $data: Record<string, any>
-  readonly $props: Record<string, any>
-  readonly $parent: Vue
-  readonly $root: Vue
-  readonly $children: Vue[]
+export interface Vue<
+  Data = Record<string, any>,
+  Props = Record<string, any>,
+  Parent = never,
+  Root = never,
+  Children = 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>
-  $emit(event: string, ...args: any[]): this
-}
+  $emit: Emit
 
-export interface Vue2Instance {
+  // Vue 2 only or shared
   readonly $el: Element
   readonly $refs: {
     [key: string]: Vue | Element | (Vue | Element)[] | undefined