Why is the definition of a function different in vue2?

problem description

just learned from vue2,. The data of a component must be a method, which is defined as shown in Code 1

.

Code 1:

//1
data: function () {
  return {
    count: 0
  }
}

and the methods defined in methods in vue are shown in Code 2
Code 2:

...
methods: {
    //2
    routeChange () {
      console.log("test")
    }
  },

is also defined why method 1 and method 2 are defined in a different way?
emm. I also want Baidu, but I don"t know where to ask, so I came here specially to ask for help, emm.. Please forgive me for asking too mentally retarded when I first entered the front end. If you have any trouble to answer, thank you very much for the ^-^-sharp-sharp-sharp question description

.

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

Jun.05,2021

data is designed as a method because you don't want multiple components to operate on references to data at the same time (such as component inheritance), so data is a function , and execution returns are the real data.


The problem of

should be js syntax. A function in js is a variable type, so a function can be defined in two syntax:
1, function test () {}
2, var test=function () {}

.

thus, assigning a value to a member of the object,

var obj={test1(){},test2:function(){}}
The two members of

obj, test1 and test2, are equivalent. As for why vue is written that way, I understand that his name is prescribed for data, and it is more rigorous to use data:function () {} to express it. As for the method name, this is arbitrary, so it takes a more liberal way. As a matter of fact, I always use methodName:function () {} when I write the method name myself. It's a matter of personal habit.


both have the same effect. In addition, I am used to writing

.
data () {
  return {
  }
}
Menu