Subscribe on changes!

v-memo support deep comparison of object

avatar
Jul 25th 2023

What problem does this feature solve?

<div v-memo="[data]">{{ data.time }}</div>

A property change in a deep object can't trigger update.

<div v-memo="[JSON.stringify(data)]">{{ data.time }}</div>

JSON stringify is not a good idea, but I have to do. demo

What does the proposed API look like?

maybe like this

<div v-memo.deep="[data]">{{ data.time }}</div>
avatar
Jul 26th 2023

Use import { toRaw } from 'vue'; and [toRaw(data)]?

avatar
Jul 26th 2023

使用import { toRaw } from 'vue';[toRaw(data)]?

<li v-memo="[toRaw(data)]">{{ data.time }}</li>

I updated it to the demo. This doesn't seem to work.

avatar
Sep 1st 2023

use [data.time] instead, it compared each value with its before value

avatar
Sep 4th 2023

use [data.time] instead, it compared each value with its before value

If time is object type data, this may not work

avatar
Sep 21st 2023

If this is the case, then v-memo must make a deep copy of the passed value. When the amount of bound value data is large, it will cause performance problems. I think this violates the original intention of v-memo.