Vuejs clone object in script tag or inside instance e.g. data

Question

Wondering what is the best practice for such code here and what is the difference when cloning an object inside script tag or doing it in data property:

<script>
  import {cloneDeep} from "lodash";
  import {INVITE_USER_FORM_FIELDS} from './data';

  const FORM_FIELDS = cloneDeep(INVITE_USER_FORM_FIELDS);

  export default {
    name: "ModalInviteCreate",
    data() {
      return {
        FORM_FIELDS,
      };
    },

OR

<script>
  import {cloneDeep} from "lodash";
  import {INVITE_USER_FORM_FIELDS} from './data';

  export default {
    name: "ModalInviteCreate",
    data() {
      return {
        FORM_FIELDS: cloneDeep(INVITE_USER_FORM_FIELDS),
      };
    },

AlexMA · Accepted Answer · 2020-04-14 01:07:47Z

The difference is the data method will run every time you create a new instance of that component. If you never need to recompute a deep clone, then option 1 is preferable since the extra clones are a waste. If you're bothering to create a deep clone though, I'm guessing it's so your components can safely mutate the object without modifying the original. So option 2 is probably the best choice, otherwise all of the component instances would all share the same object.

Here's an example to illustrate, see the console.logs.

const fakeDeepClone = name => { 
  console.log(`creating data for component ${name}`);
  return { name };
}

const aData = fakeDeepClone('a');

const componentA = {
  template: '<div>name: {{name}}</div>',
  data() {
    return aData
  }
}

const componentB = {
  template: '<div>name: {{name}}</div>',
  data() {
    return fakeDeepClone('b')
  }
}

var app = new Vue({
  el: '#app',
  components: {
    componentA,
    componentB
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component-a></component-a>
  <component-a></component-a>
  <component-b></component-b>
  <component-b></component-b>
</div>

Collectives™ on Stack Overflow

Vuejs clone object in script tag or inside instance e.g. data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related