From ded5ab7bd9d1affc7b8cf671bf86110bc6033f8b Mon Sep 17 00:00:00 2001
From: Dmitry Nikulin <v.dmitry.nikulin@gmail.com>
Date: Sat, 17 Oct 2020 10:05:49 +0300
Subject: [PATCH] refactor: watch APIs default to trigger pre-flush (#566)

BREAKING CHANGE: watch APIs now default to use `flush: 'pre'` instead of
`flush: 'post'`.

  - Check https://github.com/vuejs/vue-next/commit/49bb44756fda0a7019c69f2fa6b880d9e41125aa

  - This change affects `watch`, `watchEffect`, the `watch` component
    option, and `this.$watch`.

  - As pointed out by @skirtles-code in
    [this comment](#1706 (comment)),
    Vue 2's watch behavior is pre-flush, and the ecosystem has many uses
    of watch that assumes the pre-flush behavior. Defaulting to post-flush
    can result in unnecessary re-renders without the users being aware of
    it.

  - With this change, watchers need to specify `{ flush: 'post' }` via
    options to trigger callback after Vue render updates. Note that
    specifying `{ flush: 'post' }` will also defer `watchEffect`'s
    initial run to wait for the component's initial render.
---
 src/apis/watch.ts       | 4 ++--
 test/apis/watch.spec.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/apis/watch.ts b/src/apis/watch.ts
index 4e1724a4..19df3e24 100644
--- a/src/apis/watch.ts
+++ b/src/apis/watch.ts
@@ -83,7 +83,7 @@ function getWatcherOption(options?: Partial<WatchOptions>): WatchOptions {
     ...{
       immediate: false,
       deep: false,
-      flush: 'post',
+      flush: 'pre',
     },
     ...options,
   }
@@ -94,7 +94,7 @@ function getWatchEffectOption(options?: Partial<WatchOptions>): WatchOptions {
     ...{
       immediate: true,
       deep: false,
-      flush: 'post',
+      flush: 'pre',
     },
     ...options,
   }
diff --git a/test/apis/watch.spec.js b/test/apis/watch.spec.js
index c480f1b2..33f5b626 100644
--- a/test/apis/watch.spec.js
+++ b/test/apis/watch.spec.js
@@ -178,7 +178,7 @@ describe('api/watch', () => {
             spy(newVal, oldVal)
             rerenderedText = vm.$el.textContent
           },
-          { lazy: true }
+          { lazy: true, flush: 'post' }
         )
         return {
           a,
@@ -210,7 +210,7 @@ describe('api/watch', () => {
               rerenderedText = vm.$el.textContent
             }
           },
-          { immediate: true }
+          { immediate: true, flush: 'post' }
         )
         return {
           a,