How to disable data observation in vue.js component property

Question

I want to create a Vue.js component that receives properties from its parent component, e.g.:

<table-cell :value="foo" format="date" />

Because value and format are defined as properties, Vue will automatically register observers to their values. That is fine in general, but for my use case I positively know those values are not going to change so they don't need to be observed.

Given that my table cell component can be in a table with, say, 1,000 rows and 10 columns, those 2 properties will create 20,000 observers, and I want to avoid all this overhead (and my real table cell component has more complex properties).

Is there any way to disable a component property from being observed in order to avoid wasting CPU & memory resources?

Update: I have found a low-level solution with the functional component approach, explained here: https://v2.vuejs.org/v2/guide/render-function.html#Functional-Components

I have tested it with this JSFiddle: https://jsfiddle.net/50wL7mdz/12143/

I wonder if that is the correct approach...

Marek Urbanowicz · Accepted Answer · 2017-01-30 11:33:57Z

1

Pass it with custom data I think like <your-component :data-value='foo' :data-format='date'>

It will do what you want.

edited Jan 30, 2017 at 11:33

answered Jan 30, 2017 at 11:02

Marek Urbanowicz

13.8k19 gold badges68 silver badges93 bronze badges

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

7 Comments

Luis Crespo Over a year ago

Unfortunately that won't work: you are just adding a reference to a dynamic property, which will still be observed, even if you delete this.dinamicProp.

Marek Urbanowicz Over a year ago

use slot and pass static data in slot ?

Luis Crespo Over a year ago

The slot option could work for a single & text-only property. If I need to pass several properties and some of them may be objects, I would have to parse complex text, and that would defeat the original purpose.

Marek Urbanowicz Over a year ago

pass as custom data.

Marek Urbanowicz Over a year ago

also, you can use NAMED slots which would enable you to use multiple data

|

Collectives™ on Stack Overflow

How to disable data observation in vue.js component property

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related