Merge remote-tracking branch 'github/master' into changing_unwrap_ref

packages/runtime-core/__tests__/componentProps.spec.ts

@@ -175,9 +175,17 @@ describe('component props', () => {
     expect(proxy.foo).toBe(2)
     expect(proxy.bar).toEqual({ a: 1 })
 
-    render(h(Comp, { foo: undefined, bar: { b: 2 } }), root)
+    render(h(Comp, { bar: { b: 2 } }), root)
     expect(proxy.foo).toBe(1)
     expect(proxy.bar).toEqual({ b: 2 })
+
+    render(h(Comp, { foo: 3, bar: { b: 3 } }), root)
+    expect(proxy.foo).toBe(3)
+    expect(proxy.bar).toEqual({ b: 3 })
+
+    render(h(Comp, { bar: { b: 4 } }), root)
+    expect(proxy.foo).toBe(1)
+    expect(proxy.bar).toEqual({ b: 4 })
   })
 
   test('optimized props updates', async () => {

packages/runtime-core/__tests__/componentProxy.spec.ts

@@ -3,7 +3,8 @@ import {
   render,
   getCurrentInstance,
   nodeOps,
-  createApp
+  createApp,
+  shallowReadonly
 } from '@vue/runtime-test'
 import { mockWarn } from '@vue/shared'
 import { ComponentInternalInstance } from '../src/component'
@@ -85,10 +86,10 @@ describe('component: proxy', () => {
     }
     render(h(Comp), nodeOps.createElement('div'))
     expect(instanceProxy.$data).toBe(instance!.data)
-    expect(instanceProxy.$props).toBe(instance!.props)
-    expect(instanceProxy.$attrs).toBe(instance!.attrs)
-    expect(instanceProxy.$slots).toBe(instance!.slots)
-    expect(instanceProxy.$refs).toBe(instance!.refs)
+    expect(instanceProxy.$props).toBe(shallowReadonly(instance!.props))
+    expect(instanceProxy.$attrs).toBe(shallowReadonly(instance!.attrs))
+    expect(instanceProxy.$slots).toBe(shallowReadonly(instance!.slots))
+    expect(instanceProxy.$refs).toBe(shallowReadonly(instance!.refs))
     expect(instanceProxy.$parent).toBe(
       instance!.parent && instance!.parent.proxy
     )

packages/runtime-core/__tests__/scheduler.spec.ts

@@ -262,4 +262,20 @@ describe('scheduler', () => {
     // job2 should be called only once
     expect(calls).toEqual(['job1', 'job2', 'job3', 'job4'])
   })
+
+  test('sort job based on id', async () => {
+    const calls: string[] = []
+    const job1 = () => calls.push('job1')
+    // job1 has no id
+    const job2 = () => calls.push('job2')
+    job2.id = 2
+    const job3 = () => calls.push('job3')
+    job3.id = 1
+
+    queueJob(job1)
+    queueJob(job2)
+    queueJob(job3)
+    await nextTick()
+    expect(calls).toEqual(['job3', 'job2', 'job1'])
+  })
 })

packages/runtime-core/src/component.ts

@@ -3,7 +3,8 @@ import {
   reactive,
   ReactiveEffect,
   pauseTracking,
-  resetTracking
+  resetTracking,
+  shallowReadonly
 } from '@vue/reactivity'
 import {
   ComponentPublicInstance,
@@ -347,7 +348,7 @@ function setupStatefulComponent(
       setup,
       instance,
       ErrorCodes.SETUP_FUNCTION,
-      [instance.props, setupContext]
+      [__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
     )
     resetTracking()
     currentInstance = null
@@ -479,17 +480,6 @@ function finishComponentSetup(
   }
 }
 
-const slotsHandlers: ProxyHandler<InternalSlots> = {
-  set: () => {
-    warn(`setupContext.slots is readonly.`)
-    return false
-  },
-  deleteProperty: () => {
-    warn(`setupContext.slots is readonly.`)
-    return false
-  }
-}
-
 const attrHandlers: ProxyHandler<Data> = {
   get: (target, key: string) => {
     markAttrsAccessed()
@@ -514,7 +504,7 @@ function createSetupContext(instance: ComponentInternalInstance): SetupContext {
         return new Proxy(instance.attrs, attrHandlers)
       },
       get slots() {
-        return new Proxy(instance.slots, slotsHandlers)
+        return shallowReadonly(instance.slots)
       },
       get emit() {
         return (event: string, ...args: any[]) => instance.emit(event, ...args)

packages/runtime-core/src/componentOptions.ts

@@ -15,7 +15,8 @@ import {
   isArray,
   EMPTY_OBJ,
   NOOP,
-  hasOwn
+  hasOwn,
+  isPromise
 } from '@vue/shared'
 import { computed } from './apiComputed'
 import { watch, WatchOptions, WatchCallback } from './apiWatch'
@@ -316,6 +317,13 @@ export function applyOptions(
       )
     }
     const data = dataOptions.call(ctx, ctx)
+    if (__DEV__ && isPromise(data)) {
+      warn(
+        `data() returned a Promise - note data() cannot be async; If you ` +
+          `intend to perform data fetching before component renders, use ` +
+          `async setup() + <Suspense>.`
+      )
+    }
     if (!isObject(data)) {
       __DEV__ && warn(`data() should return an object.`)
     } else if (instance.data === EMPTY_OBJ) {

packages/runtime-core/src/componentProps.ts

@@ -1,4 +1,4 @@
-import { toRaw, lock, unlock, shallowReadonly } from '@vue/reactivity'
+import { toRaw, shallowReactive } from '@vue/reactivity'
 import {
   EMPTY_OBJ,
   camelize,
@@ -114,7 +114,7 @@ export function initProps(
 
   if (isStateful) {
     // stateful
-    instance.props = isSSR ? props : shallowReadonly(props)
+    instance.props = isSSR ? props : shallowReactive(props)
   } else {
     if (!options) {
       // functional w/ optional props, props === attrs
@@ -132,9 +132,6 @@ export function updateProps(
   rawProps: Data | null,
   optimized: boolean
 ) {
-  // allow mutation of propsProxy (which is readonly by default)
-  unlock()
-
   const {
     props,
     attrs,
@@ -186,7 +183,16 @@ export function updateProps(
           // and converted to camelCase (#955)
           ((kebabKey = hyphenate(key)) === key || !hasOwn(rawProps, kebabKey)))
       ) {
-        delete props[key]
+        if (options) {
+          props[key] = resolvePropValue(
+            options,
+            rawProps || EMPTY_OBJ,
+            key,
+            undefined
+          )
+        } else {
+          delete props[key]
+        }
       }
     }
     for (const key in attrs) {
@@ -196,9 +202,6 @@ export function updateProps(
     }
   }
 
-  // lock readonly
-  lock()
-
   if (__DEV__ && rawOptions && rawProps) {
     validateProps(props, rawOptions)
   }
@@ -250,25 +253,24 @@ function resolvePropValue(
   key: string,
   value: unknown
 ) {
-  let opt = options[key]
-  if (opt == null) {
-    return value
-  }
-  const hasDefault = hasOwn(opt, 'default')
-  // default values
-  if (hasDefault && value === undefined) {
-    const defaultValue = opt.default
-    value = isFunction(defaultValue) ? defaultValue() : defaultValue
-  }
-  // boolean casting
-  if (opt[BooleanFlags.shouldCast]) {
-    if (!hasOwn(props, key) && !hasDefault) {
-      value = false
-    } else if (
-      opt[BooleanFlags.shouldCastTrue] &&
-      (value === '' || value === hyphenate(key))
-    ) {
-      value = true
+  const opt = options[key]
+  if (opt != null) {
+    const hasDefault = hasOwn(opt, 'default')
+    // default values
+    if (hasDefault && value === undefined) {
+      const defaultValue = opt.default
+      value = isFunction(defaultValue) ? defaultValue() : defaultValue
+    }
+    // boolean casting
+    if (opt[BooleanFlags.shouldCast]) {
+      if (!hasOwn(props, key) && !hasDefault) {
+        value = false
+      } else if (
+        opt[BooleanFlags.shouldCastTrue] &&
+        (value === '' || value === hyphenate(key))
+      ) {
+        value = true
+      }
     }
   }
   return value

packages/runtime-core/src/componentProxy.ts

@@ -2,7 +2,12 @@ import { ComponentInternalInstance, Data } from './component'
 import { nextTick, queueJob } from './scheduler'
 import { instanceWatch } from './apiWatch'
 import { EMPTY_OBJ, hasOwn, isGloballyWhitelisted, NOOP } from '@vue/shared'
-import { ReactiveEffect, UnwrapRef, toRaw } from '@vue/reactivity'
+import {
+  ReactiveEffect,
+  UnwrapRef,
+  toRaw,
+  shallowReadonly
+} from '@vue/reactivity'
 import {
   ExtractComputedReturns,
   ComponentOptionsBase,
@@ -36,8 +41,8 @@ export type ComponentPublicInstance<
   $attrs: Data
   $refs: Data
   $slots: Slots
-  $root: ComponentInternalInstance | null
-  $parent: ComponentInternalInstance | null
+  $root: ComponentPublicInstance | null
+  $parent: ComponentPublicInstance | null
   $emit: EmitFn<E>
   $el: any
   $options: ComponentOptionsBase<P, B, D, C, M, E>
@@ -57,10 +62,10 @@ const publicPropertiesMap: Record<
   $: i => i,
   $el: i => i.vnode.el,
   $data: i => i.data,
-  $props: i => i.props,
-  $attrs: i => i.attrs,
-  $slots: i => i.slots,
-  $refs: i => i.refs,
+  $props: i => (__DEV__ ? shallowReadonly(i.props) : i.props),
+  $attrs: i => (__DEV__ ? shallowReadonly(i.attrs) : i.attrs),
+  $slots: i => (__DEV__ ? shallowReadonly(i.slots) : i.slots),
+  $refs: i => (__DEV__ ? shallowReadonly(i.refs) : i.refs),
   $parent: i => i.parent && i.parent.proxy,
   $root: i => i.root && i.root.proxy,
   $emit: i => i.emit,

packages/runtime-core/src/index.ts

@@ -2,20 +2,21 @@
 
 export const version = __VERSION__
 export {
-  effect,
   ref,
   unref,
   shallowRef,
   isRef,
+  toRef,
   toRefs,
+  customRef,
   reactive,
   isReactive,
   readonly,
   isReadonly,
   shallowReactive,
-  toRaw,
-  markReadonly,
-  markNonReactive
+  shallowReadonly,
+  markNonReactive,
+  toRaw
 } from '@vue/reactivity'
 export { computed } from './apiComputed'
 export { watch, watchEffect } from './apiWatch'

packages/runtime-core/src/scheduler.ts

@@ -1,7 +1,12 @@
 import { ErrorCodes, callWithErrorHandling } from './errorHandling'
 import { isArray } from '@vue/shared'
 
-const queue: (Function | null)[] = []
+export interface Job {
+  (): void
+  id?: number
+}
+
+const queue: (Job | null)[] = []
 const postFlushCbs: Function[] = []
 const p = Promise.resolve()
 
@@ -9,20 +14,20 @@ let isFlushing = false
 let isFlushPending = false
 
 const RECURSION_LIMIT = 100
-type CountMap = Map<Function, number>
+type CountMap = Map<Job | Function, number>
 
 export function nextTick(fn?: () => void): Promise<void> {
   return fn ? p.then(fn) : p
 }
 
-export function queueJob(job: () => void) {
+export function queueJob(job: Job) {
   if (!queue.includes(job)) {
     queue.push(job)
     queueFlush()
   }
 }
 
-export function invalidateJob(job: () => void) {
+export function invalidateJob(job: Job) {
   const i = queue.indexOf(job)
   if (i > -1) {
     queue[i] = null
@@ -45,11 +50,9 @@ function queueFlush() {
   }
 }
 
-const dedupe = (cbs: Function[]): Function[] => [...new Set(cbs)]
-
 export function flushPostFlushCbs(seen?: CountMap) {
   if (postFlushCbs.length) {
-    const cbs = dedupe(postFlushCbs)
+    const cbs = [...new Set(postFlushCbs)]
     postFlushCbs.length = 0
     if (__DEV__) {
       seen = seen || new Map()
@@ -63,6 +66,8 @@ export function flushPostFlushCbs(seen?: CountMap) {
   }
 }
 
+const getId = (job: Job) => (job.id == null ? Infinity : job.id)
+
 function flushJobs(seen?: CountMap) {
   isFlushPending = false
   isFlushing = true
@@ -70,6 +75,18 @@ function flushJobs(seen?: CountMap) {
   if (__DEV__) {
     seen = seen || new Map()
   }
+
+  // Sort queue before flush.
+  // This ensures that:
+  // 1. Components are updated from parent to child. (because parent is always
+  //    created before the child so its render effect will have smaller
+  //    priority number)
+  // 2. If a component is unmounted during a parent component's update,
+  //    its update can be skipped.
+  // Jobs can never be null before flush starts, since they are only invalidated
+  // during execution of another flushed job.
+  queue.sort((a, b) => getId(a!) - getId(b!))
+
   while ((job = queue.shift()) !== undefined) {
     if (job === null) {
       continue
@@ -88,7 +105,7 @@ function flushJobs(seen?: CountMap) {
   }
 }
 
-function checkRecursiveUpdates(seen: CountMap, fn: Function) {
+function checkRecursiveUpdates(seen: CountMap, fn: Job | Function) {
   if (!seen.has(fn)) {
     seen.set(fn, 1)
   } else {

packages/runtime-core/src/vnode.ts

@@ -17,7 +17,7 @@ import {
   ClassComponent
 } from './component'
 import { RawSlots } from './componentSlots'
-import { isReactive, Ref } from '@vue/reactivity'
+import { isReactive, Ref, toRaw } from '@vue/reactivity'
 import { AppContext } from './apiCreateApp'
 import {
   SuspenseImpl,
@@ -292,6 +292,22 @@ function _createVNode(
             ? ShapeFlags.FUNCTIONAL_COMPONENT
             : 0
 
+  if (
+    __DEV__ &&
+    shapeFlag & ShapeFlags.STATEFUL_COMPONENT &&
+    isReactive(type)
+  ) {
+    type = toRaw(type)
+    warn(
+      `Vue received a Component which was made a reactive object. This can ` +
+        `lead to unnecessary performance overhead, and should be avoided by ` +
+        `marking the component with \`markNonReactive\` or using \`shallowRef\` ` +
+        `instead of \`ref\`.`,
+      `\nComponent that was made reactive: `,
+      type
+    )
+  }
+
   const vnode: VNode = {
     _isVNode: true,
     type,