-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
beforeUpdate() is actually executed AFTER render() #7481
Comments
On the other hand, Admittedly, |
I think there's indeed a mismatch here, since the description indicates you can mutate state in I'll give it some proper thought next week. |
Just saw this updated. Do you guys really think it is a good idea that resolving this by just simply revising the wording of the API docs? I don't think so. First of all, Secondly, if do decide to take the path that updating the docs to match the current Further more, if it is not allowed to change/update the states of the component in |
@nobelhuang Don't worry, this isn't considered "resolved" yet. It was my fault the issue was accidentally closed, as I didn't remove the |
Thanks for the passionate discussion. The doc issue accidentally closes this, so I reopen the issue since it is still in review.
I think so.
Can you give an example where called before/after render will give significant difference? The old doc said further state change can occur in However, if
So changing state should be your use case. But as discussed above I suspect if it is proper usage. React has recommend against this, and of course Vue don't want to be unique here.
So the real proposal here should be Other than the request, you can use |
@HerringtonDarkholme Thanks for comments.
Surely as you said, if state changing is disallowed in
I don't think changing state before
Actually, I was curious why I couldn't find any filed bugs regarding Anyway, if you think this is not a functional bug, it would be good to have a Thanks again for you guys awesome works. |
IMHO it should not, whenever it is called, and the new doc has removed that suggestion. Again, beforeUpdate executed before/after render only differs when you change state. So that is probably why no issue has yet been reported on this. Please do provide a concrete example where you do need to change state in beforeUpdate.
I agree that is useful. And indeed it is not uncommon to have a component with large prop set. e.g. a bridging component for google map. What I have seen is developers uses helper function to dynamically watch props change. Say, function dynamicWatch(props, vm, func) {
for (let key in props)
vm.$watch(key, func)
} So to summarize the discussion above, can we list these 3 points?
Does this wrap up the thread? |
Okay, it seems that I have to provide a couple of examples. I came up with these examples randomly. Example 1. jsfiddle Example 2. jsfiddle I am feeling I lost my point through this thread. To wrap up, I only want to state that, because both the API doc and the lifecycle diagram consistently indicate you can change states in |
* Create new page * Update * Improve intro * Update * Add Example * Include real world example and explanation about testing * Added "Why vue" en, cn srt files into assets folder (vuejs#1367) * added english srt file * added chinese srt file * typo * fix: Correct sidebar anchor targets (vuejs#1366) Change function execution order to correct sidebar anchor targets; more concise fix to vuejs/v2.vuejs.org#1348. * Images not found. (vuejs#1365) Hi, The images link for `hn.png` and `hn-architecture.png` can be found on `../../images/`. * [Doc EN]: `event.md` add space to new part (vuejs#1363) * New in with + symbol Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Review of 2.5.0 doc Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Review Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Fix syntax typo Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Add space between new line of documentation Signed-off-by: MachinisteWeb <bruno.lesieur@gmail.com> * Add @posva review Signed-off-by: MachinisteWeb <bruno.lesieur@gmail.com> * Retrieve tweeningValue from onUpdate callback in documentation (vuejs#1350) The tweeningValue no longer seems to be available in the tween object itself. Instead, the tweeningValue is available in the tweened object that passed as a parameter to the onUpdate callback. * Add watch usages (vuejs#1356) * Add watch usages! Add `watch` usages! * Update index.md * tweaks to watch api examples * Avoid updating license every year (vuejs#1353) * Update spelling error and add some details about what we are testing * Update * typo for chinese subtitles of "why vue" video (vuejs#1371) * Adding Why Vue.js video to Introduction page (vuejs#1377) * Added video into guide introduction * Added modal styles to page, put video line on one file, and reset iframe margin * Fixed typo in Gulp example in deployment.md (vuejs#1376) * Update deployment.md with Grunt example (vuejs#1375) * Decoupled video player from Vimeo (vuejs#1374) * Update Installation guide to use https://caniuse.com (vuejs#1372) * [HOTFIX] initVideoModal error in common.js (vuejs#1378) * Showing all possible params of watch() (vuejs#1380) Surprised that the documentation didn't include the fact that the 2nd argument is the previous value. This can be really useful in some cases! * refactor & update sponsors display * include bronze data * fix link * fix link * add build script * update deploy docs * Small fixes (vuejs#1381) * fixed video modal bug in guide/index.md * removed unnecessary sponsors content which has been in theme layout now * fixed sponsors dropdown menu * fixed button style in team page * update Guillaume's core focus * Improve based on Sarah Drasner feedback and fix some grammar * Fixed TYPO Automatic Key Modifiers (vuejs#1388) * update community deployment instructions * Tweak wording of `.passive` modifier explanation * Add guide link in Vue.filter API (vuejs#1394) * Update filters, global filters needs to go before Vue instance creation (vuejs#1392) Global filters defined after creating the Vue instance throws `Failed to resolve filter`. Reference https://forum.vuejs.org/t/global-filters-failing-to-resolve-inside-single-file-components/21863/6 * update tree-view example to add v-for key * add details of object merging to mixins page * Revise beforeUpdate API entry, fixes vuejs/vue#7481 (vuejs#1395) * fix vue team distance sorting * Add explicit version to download links (vuejs#1398) * Add explicit version to download links * improve CDN section of installation page * demo from ’Object Change Detection‘ doesn't work (vuejs#1397) vm.$set(this.userProfile, 'age', 27) ==> vm.$set(vm.userProfile, 'age', 27); * Updated description of Weex (vuejs#1396) * updated description of Weex (close vuejs#1382) * Update comparison.md * Update "incubated to" -> "incubated by" * Update comparison.md * Update comparison.md * fix vue component require syntax for modern vue-loader * The Web Optimization Project has optimized your repository! (vuejs#1389) The Web Optimization Project optimized this repository. This commit contains the optimized files in this repository. * Fix wrapperfind(error) typo and add example to test for whitespace * Update * Use factory function to save redundant logic * Add factory function explanation and link to vue test utils guides. * Update using codebryo feedback * Change Github to GitHub (vuejs#1399) * Fixed js error when click the page (vuejs#1401) * Change cookbook entry number and reformat sentence * Change order * fix: typo in v-show description (vuejs#1408) * Create new page * Update * Improve intro * Update * Add Example * Include real world example and explanation about testing * Update spelling error and add some details about what we are testing * Update * Improve based on Sarah Drasner feedback and fix some grammar * Fix wrapperfind(error) typo and add example to test for whitespace * Update * Use factory function to save redundant logic * Add factory function explanation and link to vue test utils guides. * Update using codebryo feedback * Change cookbook entry number and reformat sentence * Change order * Rebase
* Create new page * Update * Improve intro * Update * Add Example * Include real world example and explanation about testing * Added "Why vue" en, cn srt files into assets folder (#1367) * added english srt file * added chinese srt file * typo * fix: Correct sidebar anchor targets (#1366) Change function execution order to correct sidebar anchor targets; more concise fix to vuejs/v2.vuejs.org#1348. * Images not found. (#1365) Hi, The images link for `hn.png` and `hn-architecture.png` can be found on `../../images/`. * [Doc EN]: `event.md` add space to new part (#1363) * New in with + symbol Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Review of 2.5.0 doc Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Review Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Fix syntax typo Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Add space between new line of documentation Signed-off-by: MachinisteWeb <bruno.lesieur@gmail.com> * Add @posva review Signed-off-by: MachinisteWeb <bruno.lesieur@gmail.com> * Retrieve tweeningValue from onUpdate callback in documentation (#1350) The tweeningValue no longer seems to be available in the tween object itself. Instead, the tweeningValue is available in the tweened object that passed as a parameter to the onUpdate callback. * Add watch usages (#1356) * Add watch usages! Add `watch` usages! * Update index.md * tweaks to watch api examples * Avoid updating license every year (#1353) * Update spelling error and add some details about what we are testing * Update * typo for chinese subtitles of "why vue" video (#1371) * Adding Why Vue.js video to Introduction page (#1377) * Added video into guide introduction * Added modal styles to page, put video line on one file, and reset iframe margin * Fixed typo in Gulp example in deployment.md (#1376) * Update deployment.md with Grunt example (#1375) * Decoupled video player from Vimeo (#1374) * Update Installation guide to use https://caniuse.com (#1372) * [HOTFIX] initVideoModal error in common.js (#1378) * Showing all possible params of watch() (#1380) Surprised that the documentation didn't include the fact that the 2nd argument is the previous value. This can be really useful in some cases! * refactor & update sponsors display * include bronze data * fix link * fix link * add build script * update deploy docs * Small fixes (#1381) * fixed video modal bug in guide/index.md * removed unnecessary sponsors content which has been in theme layout now * fixed sponsors dropdown menu * fixed button style in team page * update Guillaume's core focus * Improve based on Sarah Drasner feedback and fix some grammar * Fixed TYPO Automatic Key Modifiers (#1388) * update community deployment instructions * Tweak wording of `.passive` modifier explanation * Add guide link in Vue.filter API (#1394) * Update filters, global filters needs to go before Vue instance creation (#1392) Global filters defined after creating the Vue instance throws `Failed to resolve filter`. Reference https://forum.vuejs.org/t/global-filters-failing-to-resolve-inside-single-file-components/21863/6 * update tree-view example to add v-for key * add details of object merging to mixins page * Revise beforeUpdate API entry, fixes vuejs/vue#7481 (#1395) * fix vue team distance sorting * Add explicit version to download links (#1398) * Add explicit version to download links * improve CDN section of installation page * demo from ’Object Change Detection‘ doesn't work (#1397) vm.$set(this.userProfile, 'age', 27) ==> vm.$set(vm.userProfile, 'age', 27); * Updated description of Weex (#1396) * updated description of Weex (close #1382) * Update comparison.md * Update "incubated to" -> "incubated by" * Update comparison.md * Update comparison.md * fix vue component require syntax for modern vue-loader * The Web Optimization Project has optimized your repository! (#1389) The Web Optimization Project optimized this repository. This commit contains the optimized files in this repository. * Fix wrapperfind(error) typo and add example to test for whitespace * Update * Use factory function to save redundant logic * Add factory function explanation and link to vue test utils guides. * Update using codebryo feedback * Change Github to GitHub (#1399) * Fixed js error when click the page (#1401) * Change cookbook entry number and reformat sentence * Change order * fix: typo in v-show description (#1408) * Create new page * Update * Improve intro * Update * Add Example * Include real world example and explanation about testing * Update spelling error and add some details about what we are testing * Update * Improve based on Sarah Drasner feedback and fix some grammar * Fix wrapperfind(error) typo and add example to test for whitespace * Update * Use factory function to save redundant logic * Add factory function explanation and link to vue test utils guides. * Update using codebryo feedback * Change cookbook entry number and reformat sentence * Change order * Rebase
* Create new page * Update * Improve intro * Update * Add Example * Include real world example and explanation about testing * Added "Why vue" en, cn srt files into assets folder (#1367) * added english srt file * added chinese srt file * typo * fix: Correct sidebar anchor targets (#1366) Change function execution order to correct sidebar anchor targets; more concise fix to vuejs/v2.vuejs.org#1348. * Images not found. (#1365) Hi, The images link for `hn.png` and `hn-architecture.png` can be found on `../../images/`. * [Doc EN]: `event.md` add space to new part (#1363) * New in with + symbol Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Review of 2.5.0 doc Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Review Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Fix syntax typo Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Add space between new line of documentation Signed-off-by: MachinisteWeb <bruno.lesieur@gmail.com> * Add @posva review Signed-off-by: MachinisteWeb <bruno.lesieur@gmail.com> * Retrieve tweeningValue from onUpdate callback in documentation (#1350) The tweeningValue no longer seems to be available in the tween object itself. Instead, the tweeningValue is available in the tweened object that passed as a parameter to the onUpdate callback. * Add watch usages (#1356) * Add watch usages! Add `watch` usages! * Update index.md * tweaks to watch api examples * Avoid updating license every year (#1353) * Update spelling error and add some details about what we are testing * Update * typo for chinese subtitles of "why vue" video (#1371) * Adding Why Vue.js video to Introduction page (#1377) * Added video into guide introduction * Added modal styles to page, put video line on one file, and reset iframe margin * Fixed typo in Gulp example in deployment.md (#1376) * Update deployment.md with Grunt example (#1375) * Decoupled video player from Vimeo (#1374) * Update Installation guide to use https://caniuse.com (#1372) * [HOTFIX] initVideoModal error in common.js (#1378) * Showing all possible params of watch() (#1380) Surprised that the documentation didn't include the fact that the 2nd argument is the previous value. This can be really useful in some cases! * refactor & update sponsors display * include bronze data * fix link * fix link * add build script * update deploy docs * Small fixes (#1381) * fixed video modal bug in guide/index.md * removed unnecessary sponsors content which has been in theme layout now * fixed sponsors dropdown menu * fixed button style in team page * update Guillaume's core focus * Improve based on Sarah Drasner feedback and fix some grammar * Fixed TYPO Automatic Key Modifiers (#1388) * update community deployment instructions * Tweak wording of `.passive` modifier explanation * Add guide link in Vue.filter API (#1394) * Update filters, global filters needs to go before Vue instance creation (#1392) Global filters defined after creating the Vue instance throws `Failed to resolve filter`. Reference https://forum.vuejs.org/t/global-filters-failing-to-resolve-inside-single-file-components/21863/6 * update tree-view example to add v-for key * add details of object merging to mixins page * Revise beforeUpdate API entry, fixes vuejs/vue#7481 (#1395) * fix vue team distance sorting * Add explicit version to download links (#1398) * Add explicit version to download links * improve CDN section of installation page * demo from ’Object Change Detection‘ doesn't work (#1397) vm.$set(this.userProfile, 'age', 27) ==> vm.$set(vm.userProfile, 'age', 27); * Updated description of Weex (#1396) * updated description of Weex (close #1382) * Update comparison.md * Update "incubated to" -> "incubated by" * Update comparison.md * Update comparison.md * fix vue component require syntax for modern vue-loader * The Web Optimization Project has optimized your repository! (#1389) The Web Optimization Project optimized this repository. This commit contains the optimized files in this repository. * Fix wrapperfind(error) typo and add example to test for whitespace * Update * Use factory function to save redundant logic * Add factory function explanation and link to vue test utils guides. * Update using codebryo feedback * Change Github to GitHub (#1399) * Fixed js error when click the page (#1401) * Change cookbook entry number and reformat sentence * Change order * fix: typo in v-show description (#1408) * Create new page * Update * Improve intro * Update * Add Example * Include real world example and explanation about testing * Update spelling error and add some details about what we are testing * Update * Improve based on Sarah Drasner feedback and fix some grammar * Fix wrapperfind(error) typo and add example to test for whitespace * Update * Use factory function to save redundant logic * Add factory function explanation and link to vue test utils guides. * Update using codebryo feedback * Change cookbook entry number and reformat sentence * Change order * Rebase
* Create new page * Update * Improve intro * Update * Add Example * Include real world example and explanation about testing * Added "Why vue" en, cn srt files into assets folder (#1367) * added english srt file * added chinese srt file * typo * fix: Correct sidebar anchor targets (#1366) Change function execution order to correct sidebar anchor targets; more concise fix to vuejs/v2.vuejs.org#1348. * Images not found. (#1365) Hi, The images link for `hn.png` and `hn-architecture.png` can be found on `../../images/`. * [Doc EN]: `event.md` add space to new part (#1363) * New in with + symbol Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Review of 2.5.0 doc Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Review Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Fix syntax typo Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Add space between new line of documentation Signed-off-by: MachinisteWeb <bruno.lesieur@gmail.com> * Add @posva review Signed-off-by: MachinisteWeb <bruno.lesieur@gmail.com> * Retrieve tweeningValue from onUpdate callback in documentation (#1350) The tweeningValue no longer seems to be available in the tween object itself. Instead, the tweeningValue is available in the tweened object that passed as a parameter to the onUpdate callback. * Add watch usages (#1356) * Add watch usages! Add `watch` usages! * Update index.md * tweaks to watch api examples * Avoid updating license every year (#1353) * Update spelling error and add some details about what we are testing * Update * typo for chinese subtitles of "why vue" video (#1371) * Adding Why Vue.js video to Introduction page (#1377) * Added video into guide introduction * Added modal styles to page, put video line on one file, and reset iframe margin * Fixed typo in Gulp example in deployment.md (#1376) * Update deployment.md with Grunt example (#1375) * Decoupled video player from Vimeo (#1374) * Update Installation guide to use https://caniuse.com (#1372) * [HOTFIX] initVideoModal error in common.js (#1378) * Showing all possible params of watch() (#1380) Surprised that the documentation didn't include the fact that the 2nd argument is the previous value. This can be really useful in some cases! * refactor & update sponsors display * include bronze data * fix link * fix link * add build script * update deploy docs * Small fixes (#1381) * fixed video modal bug in guide/index.md * removed unnecessary sponsors content which has been in theme layout now * fixed sponsors dropdown menu * fixed button style in team page * update Guillaume's core focus * Improve based on Sarah Drasner feedback and fix some grammar * Fixed TYPO Automatic Key Modifiers (#1388) * update community deployment instructions * Tweak wording of `.passive` modifier explanation * Add guide link in Vue.filter API (#1394) * Update filters, global filters needs to go before Vue instance creation (#1392) Global filters defined after creating the Vue instance throws `Failed to resolve filter`. Reference https://forum.vuejs.org/t/global-filters-failing-to-resolve-inside-single-file-components/21863/6 * update tree-view example to add v-for key * add details of object merging to mixins page * Revise beforeUpdate API entry, fixes vuejs/vue#7481 (#1395) * fix vue team distance sorting * Add explicit version to download links (#1398) * Add explicit version to download links * improve CDN section of installation page * demo from ’Object Change Detection‘ doesn't work (#1397) vm.$set(this.userProfile, 'age', 27) ==> vm.$set(vm.userProfile, 'age', 27); * Updated description of Weex (#1396) * updated description of Weex (close #1382) * Update comparison.md * Update "incubated to" -> "incubated by" * Update comparison.md * Update comparison.md * fix vue component require syntax for modern vue-loader * The Web Optimization Project has optimized your repository! (#1389) The Web Optimization Project optimized this repository. This commit contains the optimized files in this repository. * Fix wrapperfind(error) typo and add example to test for whitespace * Update * Use factory function to save redundant logic * Add factory function explanation and link to vue test utils guides. * Update using codebryo feedback * Change Github to GitHub (#1399) * Fixed js error when click the page (#1401) * Change cookbook entry number and reformat sentence * Change order * fix: typo in v-show description (#1408) * Create new page * Update * Improve intro * Update * Add Example * Include real world example and explanation about testing * Update spelling error and add some details about what we are testing * Update * Improve based on Sarah Drasner feedback and fix some grammar * Fix wrapperfind(error) typo and add example to test for whitespace * Update * Use factory function to save redundant logic * Add factory function explanation and link to vue test utils guides. * Update using codebryo feedback * Change cookbook entry number and reformat sentence * Change order * Rebase
Reopening as @Kingwl probably closed it accidentally in a PR to his fork |
I have a real use case in vue-relay, where I need to listen to any change in I attempted the following methods which all have their own issue. Re-fetch in
|
sorry about that |
This is considered a bug and the behavior has been adjusted to match the lifecycle diagram and the previous docs description. We can revert the docs after 2.6 is out. |
I'm not sure whether it is still a bug, but in this case below, the So I miss the time to access the existing |
@ntkme, thanks bro! This saved me. |
Version
2.5.13
Reproduction link
https://jsfiddle.net/5vze74yy/
Steps to reproduce
What is expected?
Per the API
https://vuejs.org/v2/api/index.html#beforeUpdate
beforeUpdate is supposed to be fired before render(), and state changes in this hook should not trigger additional re-renders.
What is actually happening?
beforeUpdate() is actually invoked after render() in current version 2.5.13.
This could result in infinite update loop, as state changes in beforeUpdate() will trigger another re-rendering.
The text was updated successfully, but these errors were encountered: