Subscribe on changes!

this.$forceUpdate changes

avatar
Mar 9th 2022

Version

3.2.31

Reproduction link

sfc.vuejs.org/

Steps to reproduce

let beforeMountForceUpdate; let beforeUnmountForceUpdate;

beforeMount() { beforeMountForceUpdate = this.$forceUpdate; listenable.addEventListener("change", this.$forceUpdate); },

beforeUnmount() { beforeUnmountForceUpdate = this.$forceUpdate; console.log(beforeMountForceUpdate === beforeUnmountForceUpdate); listenable.removeEventListener("change", this.$forceUpdate); }

What is expected?

beforeMountForceUpdate === beforeUnmountForceUpdate

What is actually happening?

beforeMountForceUpdate !== beforeUnmountForceUpdate


Results in memory leaks.

avatar
Mar 10th 2022

in Lifecycle Hooks, 'this' is proxy, eg.

const fnObj = {
// return a function
  $forceUpdate: () => () => console.log('fn')
}
const obj = {}
const proxy = new Proxy(obj, {
  get(target, key) {
    if (fnObj[key]) {
      return fnObj[key]()
    }
    return undefined
  }
})
let fn1 = proxy.$forceUpdate
let fn2 = proxy.$forceUpdate
console.log(fn1 === fn2) //false