How to disable data monitoring in the vue.js component property

Question

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

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

Since valuethey are formatdefined as properties, Vue automatically registers observers to their values. This is normal, but for my use case I am sure that these values ​​will not change, so they do not need to be observed.

Considering that my table table element can be in a table with, say, 1000 rows and 10 columns, these 2 properties will create 20,000 observers, and I want to avoid all this overhead (and my real table table element has more complex properties).

Is there a way to disconnect a component property from monitoring to avoid wasting CPU and memory resources?

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

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

I wonder if this is right ...

Answer 1

Pass it with user data, I think that <your-component :data-value='foo' :data-format='date'>

He will do what you want.