创建Vue实例传入的options

创建Vue实例的时候，需要传入一个对象options，这个options可以包含很多选项。

官网详细解析：https://cn.vuejs.org/v2/api/#选项-数据

常用的选项

el

类型：string | HTMLElement

作用：决定Vuew实例会管理哪一个DOM

data

类型：Object | Function(组件当中data必须是一个函数)

作用：Vue实例对应的数据对象

methods

类型：{[key: string]: Funtion}

作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

computed

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

作用：

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

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

computed: {
  aDouble: vm => vm.a * 2
}

计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。

watch

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

作用： 监听变量，变量修改是触发方法（实现多个变量依赖于一个变量）

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

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

delimiters

类型：Array<string>(默认值：["{{", "}}"])

作用：改变插值表达式符号（{{}}），改变纯文本插入分隔符。

示例：

new Vue({
  delimiters: ['${', '}']
})

// 分隔符变成了 ES6 模板字符串的风格

生命周期钩子🪝

官网链接指路：https://cn.vuejs.org/v2/api/#选项-生命周期钩子

… …

beforeCreate：初始化实例后，调用前触发。

created：实例穿件完成后触发。

beforeMount：挂在开始前被调用。

mounted：el被请创建的vm.$el替换，并且挂载到实例上去后调用。

beforeUpdate：数据更新时调用，发生在虚拟DOM补丁之前。

updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，之后调用。

activated：keep-alive 组件激活时调用

deactived：keep-alive 组件停用时调用

beforeDestory：实例销毁之前调用

destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

errorCaptured：当捕获一个来自子孙组件的错误时被调用