Skip to content

Commit

Permalink
refactor: watch APIs default to trigger pre-flush (#566)
Browse files Browse the repository at this point in the history
BREAKING CHANGE: watch APIs now default to use `flush: 'pre'` instead of
`flush: 'post'`.

  - Check vuejs/core@49bb447 

  - 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.
  • Loading branch information
the-owl committed Oct 17, 2020
1 parent d10a0ce commit ded5ab7
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 4 deletions.
4 changes: 2 additions & 2 deletions src/apis/watch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ function getWatcherOption(options?: Partial<WatchOptions>): WatchOptions {
...{
immediate: false,
deep: false,
flush: 'post',
flush: 'pre',
},
...options,
}
Expand All @@ -94,7 +94,7 @@ function getWatchEffectOption(options?: Partial<WatchOptions>): WatchOptions {
...{
immediate: true,
deep: false,
flush: 'post',
flush: 'pre',
},
...options,
}
Expand Down
4 changes: 2 additions & 2 deletions test/apis/watch.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ describe('api/watch', () => {
spy(newVal, oldVal)
rerenderedText = vm.$el.textContent
},
{ lazy: true }
{ lazy: true, flush: 'post' }
)
return {
a,
Expand Down Expand Up @@ -210,7 +210,7 @@ describe('api/watch', () => {
rerenderedText = vm.$el.textContent
}
},
{ immediate: true }
{ immediate: true, flush: 'post' }
)
return {
a,
Expand Down

0 comments on commit ded5ab7

Please sign in to comment.