[Original willing Li] in three ways and the difference data defined Vue

In the Vue, the defining data, often there are several writing, accidentally confusing, thorough detail about here, so remember to distinguish.

First, in the vue, there are three definitions written data.

1. The first writing, data is an object.

var app = new Vue({
　　el: '#app',
　　data: {
　　　　mess: 'aerchi'
　　}
})

2. The second writing, data is a function.

var app = new Vue({
　　el: '#app',
　　data: function() {
　　　　return {
　　　　　　mess: 'aerchi'
　　　　}
　　}
})

3. The third writing, data is a function that is written in a second writing ES6 .

var app = new Vue({
　　el: '#app',
　　data() {
　　　　return {
　　　　　　mess: 'aerchi'
　　　　}
　　}
})

 Second, the definition of data in the form of examples and Vue assembly.

1. In the example Vue can define data, both definitions methods are effective.

//Vue中定义的data可以是 object 也可以是函数，效果相同。验证 2020-3-7
new Vue({
 // data () {
    //   return {
    //     message: 'message-data() function!',
    //   }
    // },
    data: {
        message: 'message-data{} object !',
    },
    ...
})

 2. Vue component data must be defined as a function of the form, function definitions define the methods that are effective and ES6.

Vue.component('todo-item', {
    data:function(){
        return {mess: "aerchi--function"};
    },
    // data(){
    //     return {mess: "aerchi--data()"};
    // },
    template: '<li>{{mess}}</li>'
})

 

Three, data Three Kind of Writing difference:

1. In a simple application example vue three written almost no difference, as defined above #app object is not multiplexed.

var app = new Vue({...})

2. In the components of the application environment, there will be situations where multiple invocations of the same components, the components in order to prevent multiple locations to share the same data objects by providing  data the function, each time you create a new instance, we can call  data function, which returns a fresh copy of the data object initial data .

Note:  In the definition of a component in, data must be declared as a return to the original data object function.

The scope and features of JavaScript related functions own private scopes, scopes between function independently of each other, the situation will bind components to the data will not appear staggered.

export default{
    data(){
        return {
            ...
        }
    }

 

Three, Vue official description of the data in the
( https://cn.vuejs.org/v2/api/?#data )

data

• Type :Object | Function

• Restrictions : only accept custom components  function.

• Details :

  Vue data object instance. Vue will recursion data of properties into getter / setter, the attribute data so that the data can respond to change. The object must be a pure object (key / value pair contains zero or more) : Native Object Browser API to create, property on the prototype will be ignored. Probably it is, data should only be data - not recommended to observe the object that owns the state behavior.

  Once observing, you can not add a responsive property on the root data object. It is therefore recommended before creating the instance, you declare all root-level responsive property.

  After the instance is created, by  vm.$data the original data object access. Vue examples also represent all the properties of the data object, therefore access  vm.a is equivalent to access  vm.$data.a.

  With  _ or  $ attribute that begins  not  be proxied Vue instance, because they may Vue and built-in property, API method conflict. For example you can use  vm.$data._property to access these properties manner.

  When a component is defined, data it must be declared to return an initial data object function, because the component may be used to create multiple instances. If  data still a pure object, all instances will share the quote with a data object! By providing  data the function, each time you create a new instance, we can call the  data function, which returns a new copy of the data object initial data .

  If necessary, by  vm.$data passing  JSON.parse(JSON.stringify(...)) to give a deep copy of the original data object.

• Example :

  var data = { a: 1 }
  
  // 直接创建一个实例
  var vm = new Vue({
    data: data
  })
  vm.a // => 1
  vm.$data === data // => true
  
  // Vue.extend() 中 data 必须是函数
  var Component = Vue.extend({
    data: function () {
      return { a: 1 }
    }
  })

  Note that if you are to  data use the arrow function attributes, you  this will not point to an instance of this component, but you can still be instantiated as the first parameter of the function to visit.

  data: vm => ({ a: vm.myProp })

---