need a lifecycle hook which could exec when a component be going to destroy, and it happens before next component created

This issue has been created since 2022-10-14.

What problem does this feature solve?

1、though this request is because the component we use has side effect,but it brings huge convenience to implement bro component communication, cross level component communication, form data collection and so on. i tryed to remove the side effect of my component in "beforeDestroy" hook before other components which will cause conflict created, That's obviously not going to work due to the order of lifecycle hooks.
2、It is semantically counter-intuitive to have "beforeDestroy" hook called after the next component's "created" hook called. we need another lifecycle to express the semantic. it's easy to make mistakes when use beforeDestory intuitively
3、when we want component to auto use $set to bind data and use $delete to auto unbind data, we can't solve the side effect with current lifecycle hooks. and we can't find another way to achieve that.

What does the proposed API look like?

a new lifecycle hook which could exec when a component be going to destroy, and before next component created.

BrightTan wrote this answer on 2022-10-15

@yyx990803 尤大大,could this kind of lifecycle hook be possible to add? it really helps a lot

nooooooom wrote this answer on 2022-10-15

In my opinion, this may be the creation flow function of a component. If you don't want to maintain a global state yourself, Vue.minxin may be able to solve your needs.

function createComponentCreationFlowMixins(Vue: VueConstructor) {
  const cleanups: Array<() => void> = []

  const pushCleanup = (cleanup: () => void) =>
    !cleanups.includes(cleanup) && cleanups.push(cleanup)

  Vue.mixin({
    beforeCreate() {
      // Pass in the effect cleanup function before the component is unmounted
      this.$pushCleanup = pushCleanup
    },
    created() {
      while (cleanups.length) cleanups.pop()!()
    }
  })
}
BrightTan wrote this answer on 2022-10-15

In my opinion, this may be the creation flow function of a component. If you don't want to maintain a global state yourself, Vue.minxin may be able to solve your needs.

function createComponentCreationFlowMixins(Vue: VueConstructor) {
  const cleanups: Array<() => void> = []

  const pushCleanup = (cleanup: () => void) =>
    !cleanups.includes(cleanup) && cleanups.push(cleanup)

  Vue.mixin({
    beforeCreate() {
      // Pass in the effect cleanup function before the component is unmounted
      this.$pushCleanup = pushCleanup
    },
    created() {
      while (cleanups.length) cleanups.pop()!()
    }
  })
}

This is a good idea to deal the side-effect created by any component. but it can't solve my problem, i'm sorry that i didn't describe the problem specifically. A simple example is as follows:

<template>
  <div>
    <A v-if="someController" v-bind="value"></A>
    <B v-else v-bind="value"></B>
  </div>
</template>

<script>
export default {
  data() {
    return {
      someController: true,
      value: {} // A or B controll it.
    };
  }
};
</script>

    I will let A or B to handle "value", maybe the typeof A's value is { AValue: '', ...}, and the typeof B's value is { BValue: '', ...}. I want both A and B component could auto format the value type to fit it in "created" hook, and could auto reset the value to initial value{} in "beforeDestroy" hook, which is for avoid conflict between A and B.
    this is just a simple example. if I don't use this way i may will use "ref" to invoke A/B's methods to collect form data. when form data has many level, and needs to combine compoents flexibly. it's a very disgusting thing to handle it. The page is as follows:
image

BrightTan wrote this answer on 2022-10-15

    I know React is encourage Unidirectional Data flow, and change props directly is not encourage in Vue. but it's so convenient to modify data with props' ref, we just need to remember to clean side-effect (reset the data) when a component is destroying.

nooooooom wrote this answer on 2022-10-15

In my opinion, this may be the creation flow function of a component. If you don't want to maintain a global state yourself, Vue.minxin may be able to solve your needs.

function createComponentCreationFlowMixins(Vue: VueConstructor) {
  const cleanups: Array<() => void> = []

  const pushCleanup = (cleanup: () => void) =>
    !cleanups.includes(cleanup) && cleanups.push(cleanup)

  Vue.mixin({
    beforeCreate() {
      // Pass in the effect cleanup function before the component is unmounted
      this.$pushCleanup = pushCleanup
    },
    created() {
      while (cleanups.length) cleanups.pop()!()
    }
  })
}

This is a good idea to deal the side-effect created by any component. but it can't solve my problem, i'm sorry that i didn't describe the problem specifically. A simple example is as follows:

<template>
  <div>
    <A v-if="someController" v-bind="value"></A>
    <B v-else v-bind="value"></B>
  </div>
</template>

<script>
export default {
  data() {
    return {
      someController: true,
      value: {} // A or B controll it.
    };
  }
};
</script>

    I will let A or B to handle "value", maybe the typeof A's value is { AValue: '', ...}, and the typeof B's value is { BValue: '', ...}. I want both A and B component could auto format the value type to fit it in "created" hook, and could auto reset the value to initial value{} in "beforeDestroy" hook, which is for avoid conflict between A and B.     this is just a simple example. if I don't use this way i may will use "ref" to invoke A/B's methods to collect form data. when form data has many level, and needs to combine compoents flexibly. it's a very disgusting thing to handle it. The page is as follows: image

我可不可以这样理解,你想要将当前激活组件内部的值作为主要值,判断这些组件中某个组件是否激活的条件为该组件是否已经创建,我想你既然有变量来控制某个组件的创建状态,为什么不把这个变量用来判断将哪个组件的值作为主要值,自始至终这个功能跟一个组件的生命周期都是无关的

BrightTan wrote this answer on 2022-10-15

@nooooooom 大概就是这个意思,我其实就是想让组件自己created绑定值, beforeDestroy清空值,其实两个组件控制的值key不一样还行,如果遇到key一样就会冲突了。主要的问题是收集组件里的数据很麻烦,如果组件数据是独立的话。。

nooooooom wrote this answer on 2022-10-15

如果你不想每个组件都绑一个 key ,并且你的组件都拥有同一个父级的话,根据你的描述,用指令就能完成你的需求了

BrightTan wrote this answer on 2022-10-15

如果你不想每个组件都绑一个 key ,并且你的组件都拥有同一个父级的话,根据你的描述,用指令就能完成你的需求了

指令执行顺序是 下一个组件created => 当前组件beforeDestroy => 当前组件指令unbind,还是滞后执行unbind,不太明白指令怎么实现。如果说是它来做自动收集数据的话,不太明白咋做到QAQ

nooooooom wrote this answer on 2022-10-15

我认为数据的流向在这种情况下是没有问题的,即使你不通过 props 来传输,你也会想办法用 provide 或者全局状态来调控,
但是我认为最重要的是尽可能的减少组件中关于 “重置数据” 这段逻辑的引用,因为它不再跟 “组件是用来提供数据” 这个逻辑相关

这是一个来自父组件(或者是数据接受者自己的逻辑),指令或者组件的声明周期钩子回调都可以很好的完成这个任务

nooooooom wrote this answer on 2022-10-15

如果你不想每个组件都绑一个 key ,并且你的组件都拥有同一个父级的话,根据你的描述,用指令就能完成你的需求了

指令执行顺序是 下一个组件created => 当前组件beforeDestroy => 当前组件指令unbind,还是滞后执行unbind,不太明白指令怎么实现。如果说是它来做自动收集数据的话,不太明白咋做到QAQ

只需要在 unbind 或者 onHook:destroyed 的时候重置数据就可以了

BrightTan wrote this answer on 2022-10-15

如果你不想每个组件都绑一个 key ,并且你的组件都拥有同一个父级的话,根据你的描述,用指令就能完成你的需求了

指令执行顺序是 下一个组件created => 当前组件beforeDestroy => 当前组件指令unbind,还是滞后执行unbind,不太明白指令怎么实现。如果说是它来做自动收集数据的话,不太明白咋做到QAQ

只需要在 unbind 或者 onHook:destroyed 的时候重置数据就可以了

我之前也是这样想的,我实践发现 如果下一个替换进来的组件B也使用到了这个数据,它可能会在created做初始化,那当前组件A指令的unbind和组件钩子beforeDestroy以及destroyed 执行因为迟于组件B的created,所以都会把B初始化的数据给重置了,难受

BrightTan wrote this answer on 2022-10-15

我认为数据的流向在这种情况下是没有问题的,即使你不通过 props 来传输,你也会想办法用 provide 或者全局状态来调控, 但是我认为最重要的是尽可能的减少组件中关于 “重置数据” 这段逻辑的引用,因为它不再跟 “组件是用来提供数据” 这个逻辑相关

这是一个来自父组件(或者是数据接受者自己的逻辑),指令或者组件的声明周期钩子回调都可以很好的完成这个任务

我理解你的意思是让下一个替换进来的组件自己初始化的时候来重置数据吧。这相当于让B组件来清理A组件产生的副作用了,我当时没办法了也是这样想过,可是组件创建的逻辑可能是表单初始化,也可能是联动出现。我无法判断传入的数据是服务器传过来反显的数据还是另一个组件的副作用产生的数据,很难处理

nooooooom wrote this answer on 2022-10-15

我认为数据的流向在这种情况下是没有问题的,即使你不通过 props 来传输,你也会想办法用 provide 或者全局状态来调控, 但是我认为最重要的是尽可能的减少组件中关于 “重置数据” 这段逻辑的引用,因为它不再跟 “组件是用来提供数据” 这个逻辑相关
这是一个来自父组件(或者是数据接受者自己的逻辑),指令或者组件的声明周期钩子回调都可以很好的完成这个任务

我理解你的意思是让下一个替换进来的组件自己初始化的时候来重置数据吧。这相当于让B组件来清理A组件产生的副作用了,我当时没办法了也是这样想过,可是组件创建的逻辑可能是表单初始化,也可能是联动出现。我无法判断传入的数据是服务器传过来反显的数据还是另一个组件的副作用产生的数据,很难处理

简单啊,打个脏数据的标志就行了,如果服务器的数据设置了这个值你就设置标志为 true,然后再每次数据变动的时候把这个标志清掉

nooooooom wrote this answer on 2022-10-15

你可以先把这个 issuse 转到讨论里面去,因为这跟 Vue 的底层实现无关了

nooooooom wrote this answer on 2022-10-15

我的建议还是你最好给每个组件一个 key,这样至少组件之间的数据是互不冲突的,我能不能理解为服务器传过来的是 initialValue,然后每个组件创建时都将接收这个数据作为初始,也就是你说的 {}

如果是的话那业务就很好写了,你用这个 key 去一个大对象里面拿这个组件自己维护的数据,如果这个拿到的数据是
undefined,那么你就将服务器的数据抛出去进去,当组件卸载时只需要将自己的数据清除即可

More Details About Repo
Owner Name vuejs
Repo Name vue
Full Name vuejs/vue
Language TypeScript
Created Date 2013-07-29
Updated Date 2022-12-10
Star Count 201155
Watcher Count 6070
Fork Count 33134
Issue Count 595

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Why disable Webassembly? 4 2018-09-29 2022-10-04
Calculation goes wrong when setting other offset 3 2021-07-19 2022-10-05
Shadow map on terrain bug 0 2022-06-21 2022-12-08
RmlUI .inl inline headers don't get installed to the SDK installation. 0 2022-08-08 2022-09-19
Can't find any prebuilt binaries for mac os 0 2022-10-10 2022-11-07
Unable to see contents of a particular Installed Games folder 15 2022-04-18 2022-11-20
credgen: Implementation does not match specification 3 2021-06-04 2022-05-13
Audio not playing on iPhone 9 2018-01-29 2022-09-09
Update upp submodule for fixing UPHL issue found in 3-km RRFS North American grid 0 2022-03-19 2022-10-23
Is the DenseBlock Implementation correct? 2 2017-10-25 2022-12-09
Option to remember sidebar state 0 2022-05-09 2022-11-01
[Feature]: Winmerge does not show latest version 0 2022-10-26 2022-11-21
modified_beam_search error 3 2022-06-08 2022-09-30
Vision 분야에 관한 내용 보충도 해주신다면 정말 감사하겠습니다 1 2021-04-05 2022-10-26
[Remoto] Frontend Engineer na Intelipost 1 2022-06-17 2022-11-17
【CI】curvefs_tool cluster is unhealthy 1 2022-06-06 2022-11-25
Wails CLI V2 go install failed on MacOS 10.15 8 2022-09-23 2022-11-29
train_code/utils.py:98: RuntimeWarning: invalid value encountered in power 0 2022-01-14 2022-11-08
Cap matter condenser input to 1 bucket per operation 6 2022-10-17 2022-11-28
Prompt for background location permission in self-check 3 2021-11-15 2022-11-06
Add references to `names` documentation 3 2022-09-21 2022-12-03
I can't get linting to run at all 4 2022-08-17 2022-11-27
How to create my own topo 1 2022-03-11 2022-12-05
Allow turning off HTTP/2 in async 0 2021-10-13 2022-11-07
Logging to Xcode console 1 2022-04-15 2022-10-28
Inconsistent behavior while parsing the port number 2 2022-02-11 2022-12-10
Establish (version-independent) getting started guide 0 2022-07-26 2022-12-09
[C-API] The default return value of WasmEdge_StatisticsGetInstrPerSecond 2 2021-12-21 2022-10-27
pack double and float in a more compact way 6 2022-05-13 2022-11-29
at the time of create issue, for some project, after inserting all the mandatory data still getting the error and issue is not Created. 2 2022-04-07 2022-12-02
Buttons to switch to next/previous photosphere 9 2019-05-23 2022-11-29
Document the overflow behavior 1 2019-10-12 2022-11-12
[l10n] No scroll in Contact Us error screen on small devices 0 2022-11-08 2022-11-03
Operation ID not being picked up from StartOperation 5 2022-02-10 2022-11-09
Global uniform sampler2d are not stored when saving project 1 2022-06-14 2022-11-10
What's the difference between this and Laravel implementation 1 2022-06-02 2022-11-30
[device_info_plus] Get current device information as map 8 2021-11-17 2022-09-08
added URLShortener method in the string category 6 2021-09-01 2022-12-08
VoodooPS2: error: The one definition rule is violated, different classes/structs have the same name 'virtual_finger_state' 3 2022-04-30 2022-07-23
couldnt locate libproxychains4.so 4 2019-08-22 2022-11-23
[Improvement] [MasterServer] schedule time for process instance optimization 1 2021-10-09 2022-11-28
video tutorial shapes not showing code examples/screen 2 2015-03-15 2022-09-17
examples can show up on the pub site 2 2018-05-25 2022-11-20
NPE on PreviewUIControllerImpl due to PreviewSettingsTopComponent deserialization issues 2 2022-07-17 2022-11-17
Can't add new nodes since latest Gephi update 2 2022-07-19 2022-11-18
ObjectStore questions 14 2022-08-11 2022-12-02
Add `host key verification failed` to `Troubleshooting SSH` 1 2022-07-25 2022-11-07
Title attribute doesn't update on changes made to the datetime attribute 0 2015-08-24 2022-12-06
Add support for pinning the infra container 6 2022-02-15 2022-08-27
bfloat16 value type support 3 2022-07-25 2022-11-27