fix(runtime-core): ensure this context for $nextTick callback

fix #2282
vuejs · Oct 5, 2020 · 5c3e8e9 · 5c3e8e9
1 parent f411924
commit 5c3e8e9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/runtime-core/__tests__/componentProxy.spec.ts b/packages/runtime-core/__tests__/componentProxy.spec.ts
@@ -69,7 +69,7 @@ describe('component: proxy', () => {
     expect('count' in instanceProxy).toBe(false)
   })
 
-  test('public properties', () => {
+  test('public properties', async () => {
     let instance: ComponentInternalInstance
     let instanceProxy: any
     const Comp = {
@@ -96,6 +96,11 @@ describe('component: proxy', () => {
     expect(instanceProxy.$options).toBe(instance!.type)
     expect(() => (instanceProxy.$data = {})).toThrow(TypeError)
     expect(`Attempting to mutate public property "$data"`).toHaveBeenWarned()
+
+    const nextTickThis = await instanceProxy.$nextTick(function(this: any) {
+      return this
+    })
+    expect(nextTickThis).toBe(instanceProxy)
   })
 
   test('user attached properties', async () => {

diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
@@ -213,7 +213,7 @@ const publicPropertiesMap: PublicPropertiesMap = extend(Object.create(null), {
   $emit: i => i.emit,
   $options: i => (__FEATURE_OPTIONS_API__ ? resolveMergedOptions(i) : i.type),
   $forceUpdate: i => () => queueJob(i.update),
-  $nextTick: () => nextTick,
+  $nextTick: i => nextTick.bind(i.proxy!),
   $watch: i => (__FEATURE_OPTIONS_API__ ? instanceWatch.bind(i) : NOOP)
 } as PublicPropertiesMap)
 

diff --git a/packages/runtime-core/src/scheduler.ts b/packages/runtime-core/src/scheduler.ts
@@ -1,5 +1,6 @@
 import { ErrorCodes, callWithErrorHandling } from './errorHandling'
 import { isArray } from '@vue/shared'
+import { ComponentPublicInstance } from './componentPublicInstance'
 
 export interface SchedulerJob {
   (): void
@@ -48,9 +49,12 @@ let currentPreFlushParentJob: SchedulerJob | null = null
 const RECURSION_LIMIT = 100
 type CountMap = Map<SchedulerJob | SchedulerCb, number>
 
-export function nextTick(fn?: () => void): Promise<void> {
+export function nextTick(
+  this: ComponentPublicInstance | void,
+  fn?: () => void
+): Promise<void> {
   const p = currentFlushPromise || resolvedPromise
-  return fn ? p.then(fn) : p
+  return fn ? p.then(this ? fn.bind(this) : fn) : p
 }
 
 export function queueJob(job: SchedulerJob) {