Vue的构造选项

一 Vue实例

//构造一个vue实例
const vm=new Vue(option)
vm._ _proto_ _=Vue.prototype
Vue._ _proto_ _=Fuction.Prototype

vm对象封装了对视图的所有操作，包括数据读写，事件绑定，DOM更新。 vm的构造函数是Vue，按照ES6的说法，vm所属的类是Vue。 options是new Vue的参数，一般称之为选项或构造选项。

二 选项-DOM

el（挂载点），提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

三 选项-数据

1. data（内部数据）。支持对象和函数，但优先使用函数。因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！（使用对象为什么不对）通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。（使用函数为什么对）
2. props（外部数据）。props 可以是数组或对象，用于接收来自父组件的数据。（1）type：会检查一个 prop 是否是给定的类型，否则抛出警告。
   （2）default：any为该 prop 指定一个默认值。（3）required：Boolean定义该 prop 是否是必填项。（4）validator：Function自定义验证函数会将该 prop 的值作为唯一的参数代入。
3. methods（方法）方法中的 this 自动绑定为 Vue 实例。不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。因为箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是undefined。

四 选项-资源

1. components（组件）。使用Vue组件

import Demo from './Demo.vue'
// 全局组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('Demo2', { /* ... */ })

newVue({
  components:{
    Demo,
    Demo2,
    Demo3:{`
      data(){
        return{}
      },
      template:<div>hi</div
    `}
  }
})

五 选项-生命周期钩子

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. activated
8. deactivated
9. beforeDestroy
10. destroyed 可以用一个toggle按钮控制元素展示或隐藏，从而模拟消亡。
11. errorCaptured