Vue的API之选项/数据

Vue的API之选项/数据

data

• 类型：Object | Function

• 限制： 组件的定义只接受Function

• 详细：

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

  如下代码，将message作为Vue对象的一个属性，进行getter和setter，message就变成了直属于vm对象的一个属性。

  let vm = new Vue({
      el: '#app',
      data: {
          message: 'hello vue'
      }
  })
  

  • 实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property，因此访问 vm.message 等价于访问 vm.$data.message。
    • vm.$data访问的是data这个vm的属性的集合的对象，vm.$data.message则是相当于访问data这个对象里的message属性，vm.message则是访问vm对象的message属性。
    • 注意：以 _ 或 $ 开头的 property 不会被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些 property。
  • 当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
  • 如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。

• 示例：

let foo = { foo: 'Data Test' }
let vm = new Vue({
    el: '#app',
    data: function () {
        return { foo: 'Data Test' }
    }
    // data: () => foo
})

props

• 类型：Array<string> | Object
• 详细：
  • props可以是数组或对象，用于接收来自父组件的数据。
  • props可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，入类型检测、自定义验证和设置默认值。
    • type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
    • default：any
      为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
    • required：Boolean
      定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
    • validator：Function
      自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。
• 示例：

// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// 对象语法，提供验证
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

propsData

• 类型：{[key:string]:any}

• 限制：只用于new创建的实例中。

• 详细：创建实例时传递props。主要作用是***方便测试***

• 示例：

  var Comp = Vue.extend({
    props: ['msg'],
    template: '<div>{{ msg }}</div>'
  })
  
  var vm = new Comp({
    propsData: {
      msg: 'hello'
    }
  })
  

computed

• 类型：{[key:string]:Function | {get:Function, set:Function}}

• 详细：后面会有详细介绍

  • 计算属性，所有的getter和setter的this上下文自动地绑定Vue实例。
  • 注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

• 示例：

  let vm = new Vue({
          data: function () {
            return { a: 3 }
          },
          computed: {
            aDouble: function () {
              return this.a * 2
            },
            aPlus: {
              get: function () {
                return this.a + 1
              },
              set: function (v) {
                this.a = v - 1
              }
            }
          }
        })
  

  

methods

• 类型：{[key: string]: Function}

• 详细：

  methods将被混入Vue实例对象中，类似data，可以通过VM实例访问这些方法，或者在指令表单式中使用。方法中的this自动绑定为Vue实例。

  注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

• 示例：

  let vm = new Vue({
          data: { a: 1 },
          methods: {
            aPlus: function () {
              this.a++
            }
          }
        })
  

watch

• 类型：{[key: string]: string | Function | Object | Array}

• 详细：后面会有详细介绍

  这是一个对象，键key是需要观察的表达式，值value是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue实例对象将会在实例化时调用$watch()，遍历watch对象的每一个property。

• 示例：

  var vm = new Vue({
          data: {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
            e: {
              f: {
                g: 5
              }
            },
            h: 0
          },
          methods: {
            someMethod: function () {
              this.h = this.h + 1
            }
          },
          watch: {
            a: function (val, oldVal) {
              console.log('new: %s, old: %s', val, oldVal)
            },
            // 方法名
            b: 'someMethod',
            // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
            c: {
              handler: function (val, oldVal) {
                /* ... */
                this.someMethod()
              },
              deep: true
            },
            // 该回调将会在侦听开始之后被立即调用
            d: {
              handler: 'someMethod',
              immediate: true
            },
            // 你可以传入回调数组，它们会被逐一调用
            e: [
              'handle1',
              function handle2(val, oldVal) {
                /* ... */
              },
              {
                handler: function handle3(val, oldVal) {
                  /* ... */
                }
                /* ... */
              }
            ],
            // watch vm.e.f's value: {g: 5}
            'e.f': function (val, oldVal) {
              /* ... */
            }
          }
        })