Vue之data定义的三种方式及区别说明

在 Vue中，定义data时，经常有好几种写法，一不小心会混淆，这里彻底详述一下，以便记分清 。

一、在vue中，定义data可以有三种写法

1. 第一种写法，data是一个对象。

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

2. 第二种写法，data是一个函数。

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

3. 第三种写法，data是一个函数，是第二种写法的ES6写法。

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

二、在Vue实例及组件中定义 data的形式。

1.  在Vue 实例中可以这样定义 data， 两种定义方法均生效。

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

2.  在Vue 组件中data必须定义成函数形式， function定义方法和ES6定义均生效。

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

三、data三种写法的区别

1. 在简单的vue实例应用中，三种写法几乎是没有什么区别的，因为上述定义的 #app对象  不会被复用。

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

2. 在组件应用的环境中，会存在多个地方调用同一个组件的情况，为了不让多个地方的组件共享同一个data对象，通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

请注意： 在一个组件的定义里，data 必须声明为返回一个初始数据对象的函数。

这个与JavaScript的作用域特性有关，函数自己拥有私有的作用域，函数之间的作用域相互独立，也就不会出现组件对数据的绑定出现交错的情况。

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

四、Vue官方中关于data的说明

(https://cn.vuejs.org/v2/api/?#data)

data

类型：Object | Function

限制：组件的定义只接受 function。

详细：

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。

对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：

• 浏览器 API 创建的原生对象，原型上的属性会被忽略。
• 大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

一旦观察过，你就无法在根数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。

实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。

以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。

如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。

示例：

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 }
  }
})

注意，如果你为 data 属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。