[乐意黎原创] Vue中data定义的三种方式和区别

骑猪看日落 2023-07-11 15:23 8阅读 0赞

在 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][https_cn.vuejs.org_v2_api_data]) ##

### [data][https_cn.vuejs.org_v2_api_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 })

--------------------

[https_cn.vuejs.org_v2_api_data]: https://cn.vuejs.org/v2/api/?#data