Shulou(Shulou.com)06/03 Report--

Editor to share with you how to define the data in Vue, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

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

One is to be hijacked by the data of Vue to respond the changes of data to view in real time.

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

{{msg}} export default {data () {msg: ""}}

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

Only valid in script, not used in template, no data hijacking is required

Name is only valid in the concatName function, so it can be defined as a local variable.

Age needs to be used in both getAge and concatName functions, but it is not appropriate to use it as a local variable, so its scope can be improved to facilitate its use in multiple places.

Const age = 'bar'export default {methods: {getAge () {return age}, concatName () {let name =' nordon' reutrn `name:$ {name}, age: ${age} `},}

Only used as rendering data in template, it will not be modified in subsequent operations after customization, and some performance will be wasted if this kind of data is hijacked by Vue.

{{item.name}} const arr = Object.freeze ([{name: 'nordon', age: 18}]) export default {data () {return {arr}

Using Object.freeze to freeze the data that does not need data hijacking, it will not be hijacked when recursively traversing the data in Vue, especially for a large number of table classes.

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

Function defineReactive (obj, key) {/ / delete extraneous code only retains the judgment condition const property = Object.getOwnPropertyDescriptor (obj, key) if (property & & property.configurable = false) {return}} above is all the content of this article "how to define data in Vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.