笔记：Vue选项---数据和方法(data,props,methods,computed,watch)

1.数据选项：

data:{
    数据名:数据
    ......
},           //对象类型


data(){
    return{
        数据名:数据,
        ......
    }
},           //函数类型(在组件(Vue.component)中，数据选项必须使用函数类型)

 2.属性选项（在组件中使用）：

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值，按照我个人的理解相当于在组件中自定义属性。

 你可以基于对象的语法使用以下选项：

<1>type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。

<2>default：any
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。

<3>required：Boolean
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。

<4>validator：Function
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。

例子：

// 简单语法
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
      }
    }
  }
})

3.方法选项：

methods:{
    方法1(){}
    方法2(){}
    ......
}

ps：不要使用箭头函数在其中定义方法。

4.计算属性（computed选项）：

定义一个函数，其实是定义一个属性

computed:{
    函数名:function(){
        //代码
        return ...
    }
}

带有返回值return的函数

与methods选项类似，不要使用箭头函数在其中定义方法。注重于衍生数据，我的理解是在这个选项中定义一个计算某个值的函数，为了使代码显得不那么的臃肿，易于维护。

5.侦听属性（watch选项）：

watch更注重于处理数据变化时的业务逻辑，所以watch优于可以异步修改数据。

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。（即Vue允许开发者使用侦听属性为实例添加被观察对象，并在对象被修改时调用开发者自定义方法。） 

 在watch选项中，对数据进行监听可以再加上以下的属性。

<1>handler:侦听的函数方法名

<2>使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。这时候就可以加入immediate属性。

immediate:布尔值(true|false)，若为true时，在监听开始时即调用一次watch方法。

<3>deep:布尔值(true|false) ，深度观察：对象任何层级数据发生变化，都可以触发watch选项，也可以只给对象的某个特定的属性加上监听器。数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。

ps：deep这个属性在监听单个属性时无需加入，若需要监听复杂数据类型，例如Object，Array等，则需要加入deep：true进行深度监听，在再该类型中加入handler属性来写监听复杂数据类型新旧值变化的函数。

例子：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      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) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

以上为个人笔记，例子来自于vue官网，API — Vue.js