How can I make a value in Vue.js non-reactive?

Question

In my Vue.js app, I have an array value that should only be updated when a user completes a specific "refresh" action. However, as soon as I assign a new value to that array value, the array value becomes reactive and changes instantly as the data in the assigned value changes. The array value should remain un-reactive.

For example, I have a method, refresh(), which when triggered is meant to update displayedData, which should not be reactive, with currentData, which should be reactive. displayedData should only update when refresh is called.

methods: {
    refresh: function() {
        this.displayedData = this.currentData;
    }
}

Cole · Accepted Answer · 2023-12-22 18:07:58Z

17

To make a value not reactive without making it static, you can make a "deep copy" of it using stucturedClone(), which is universally supported as of early 2022:

this.displayedData = structuredClone(this.currentData);

A widely used method prior to the availability of structuredClone() was using JSON to encode and then decode it:

this.displayedData = JSON.parse(JSON.stringify(this.currentData));

Both of these methods assign the current state of one value to another value, and no changes to the first value will change the second value until this code is triggered again. However, structeredClone() is the superior method for several reasons.

The reason this is necessary isn't because of Vue.js specifically, but because of JavaScript in general. In JavaScript, arrays and objects are "passed by reference" rather than "passed by value".

edited Dec 22, 2023 at 18:07

answered Dec 7, 2018 at 2:27

Cole

8162 gold badges10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Valentine Shi Over a year ago

Now this is beautiiful. For around a single time execution use case this is the best choice. Though perfomance should be evaluated for numerous iterations loops use cases.

sMyles Over a year ago

This will work on any data, even if it's not an object FYI

Marco Leuti · Accepted Answer · 2022-01-22 15:16:52Z

3

You can use destructuring assigment: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment?retiredLocale=it

this.displayedData = {...this.currentData}

You will have a new object made with the "copied" data from the first

answered Jan 22, 2022 at 15:16

Marco Leuti

312 bronze badges

Comments

Sebastian Sipos · Accepted Answer · 2018-12-07 09:36:31Z

2

An approach (WITHOUT disabling reactivity) is to use a different array for your temporary data and move stuff over in to the good array when the user presses refresh.

You could copy the values in the first array into the temp array like this.temp = this.permanent.slice() in the created or mounted life-cycle function.

Slice would make a shallow copy of the array. If you need to also clone the items in the array, then maybe use some deep copy library or the JSON.parse(JSON.stringify(...)) method.

answered Dec 7, 2018 at 9:36

Sebastian Sipos

1436 bronze badges

1 Comment

Lee Cichanowicz Over a year ago

I needed to do this for an object, not an array, so I used Object.assign() to shallow-clone my object.

Borjante · Accepted Answer · 2018-12-07 09:50:35Z

2

If you DON'T add the currentData to the data() method then it will not be reactive.

export default {
    currentData: [],
    data() {
        return {

        }
    },
    methods: {
        refresh: function() {
            this.displayedData = this.currentData;
        }
    }
}

You can then still reference currentData in the section using {{ $options.currentData }}

answered Dec 7, 2018 at 9:50

Borjante

10.7k6 gold badges39 silver badges63 bronze badges

5 Comments

Cole Over a year ago

I'm having trouble getting this solution to work. The value outside of the data method doesn't want to change when refresh is triggered.

Borjante Over a year ago

That's expected, the value outside of data is totally ouf of the reactive vue component

Cole Over a year ago

I see what you mean now. The provided example does make a value non-reactive, but it also makes it static.

Mike Over a year ago

thanks, that solves all the problems with foreighn variables that should be stored 'as is' without proxying - for example, those that are compared with null in some external code (e.g. Yandex.Maps components)

redfox05 Over a year ago

This old, but still viewed/replied to so: @Cole: I don't agree that it makes it static, its non-reactive. Thus anything that relies on it, won't be updated. The value of currentData would still change, but the associated Vue things that use it (Like the html bindings) wont be updated. If you did a forced refresh or re-render of the data, then it might show the new value. Also, its outside of Vue world, so it acts strange. See jsfiddle.net/sLbyh1q8 Click refresh multiple times and look at Console output. Note my use of $options and not, and how they differ in updates.

Collectives™ on Stack Overflow

How can I make a value in Vue.js non-reactive?

4 Answers 4

2 Comments

Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related