vue中定义data的三种方式和区别

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


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

1. 第一种写法,对象。

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

 

二、三种写法的区别:

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

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

2. 在组件应用的环境中,就可能会存在多个地方调用同一个组件的情况,为了不让多个地方的组件共享同一个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 })

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章