How to define data examples in Vue

Preface

In the development process, defining variables is a very frequent and basic task. How to reasonably define variables according to the usage scenarios and scope of the variables is a very small and easy thing to make mistakes.

Vue2 has been popular for many years. Most developers like to define many variables in the data option during the development process. This is very detrimental to the readability, maintainability and performance of the code. If you want to use variables well, you need to combine the characteristics of Vue and JS.

In Vue, variables can be divided into two types according to whether two-way data binding is required:

One is to hijack the data of Vue and respond to the changes of data to the view in real time.

As long as the data can only change the msg, the msg bound in the template will respond in real time

<template>
  <div>{{msg}}</div>
</template>

<script>
export default {
  data() {
    msg: "" 
  }
};
</script>

There is another method that does not need to be hijacked by Vue data:

Only works in scripts, not used in templates, no data hijacking required

name is only valid in the concatName function, so just define it as a local variable

age is needed in both getAge and concatName functions. It is not appropriate to use it as a local variable. Then its scope can be increased to facilitate its use in multiple places.

<script>
const age = 'bar'
export default {
  methods: {
    getAge() {
      return age
    },
    concatName() {
      let name = 'nordon'
      return `name:${name}, age: ${age}`
    }
  },
};
</script>

It is only used as rendering data in the template. After customization, it will not be modified in subsequent operations. If Vue is used to hijack this data, some performance will be wasted.

<template>
  <div v-for="item in arr">{{item.name}}</div>
</template>

<script>
const arr = Object.freeze([{
  name: 'nordon',
  age: 18
}])
export default {
  data() {
    return {
      arr
    }
  }
};
</script>

Use Object.freeze to freeze the data that does not need data hijacking. When recursively traversing the data in Vue for data hijacking, the data will not be hijacked. Especially for a large number of table-like data, the performance improvement will be significant.

You can see from the Vue source code why after using Object.freeze to process the data, there will be no data hijacking.

function defineReactive (obj, key) {
  // Delete irrelevant code and keep only the judgment condition const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }
}

Summarize

This is the end of this article about how to define data in Vue. For more relevant Vue definition data content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!