Vue构造选项的相关探索

【目录】
一、options里面有什么？
二、el
三、data
四、methods
五、components
六、四个钩子
七、props

【正文】
对Vue构造选项的相关探索从这个内存图开始

需要知道的点 :

• 把Vue的实例命名为vm是尤雨溪的习惯，我们默认的话也选择沿用即可
• Vue对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新
• vm的构造函数是Vue，按照ES6的说法，vm所属的类是Vue
• optioins是new Vue的参数，一般称之为选项或构造选项

一、options里面有什么？

options的五类属性

• 数据 : data、props、propsData、computed、methods、watch

• DOM : el、template、render、renderError

• 生命周期钩子 : beforeCreate、created、beforeMount、mounted、beforeUpdate、upDateed、activated、deactivated、beforeDestroy、destroyed、errorCaptured

• 资源 : directives、filters、components

• 组合 : parent、mixins、extends、provide、inject

二、el

el : 挂载点（可以用$mount代替）

• 类型 : Element

• 只读

• 详细 : Vue 实例使用的根 DOM 元素。

代码示例 :

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

三、data

data : 内部数据（支持对象和函数，优先用函数）

• 类型 : Object | Function

• 限制 : 组件的定义只接受 function。

• 详细 : 示例代码如下

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

四、methods

methods : 方法（事件处理函数或者是普通函数）

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

• 详细 : methods 将被混入到 Vue 实例中。可以直接通过 vm 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

代码示例如下 :

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

五、components

• 类型 : Object

• 详细 : 包含 Vue 实例可用组件的哈希表。

三种引入方式

1、第一种引入方式(推荐方式一，因为较为模块化)

import  Demo from './Demo.vue'

new Vue(
   components:{     
           Frank:Demo
        }
}).$mount('#frank')

2、第二种引入方式

Vue.component('Demo2',{
  template:`
    
123
`
})

3、第三种引入方式

new Vue(
   components:{     
           Frank:{
             template:`
    
123
`}
        }
}).$mount('#frank')

六、四个钩子

1、created : 实例出现在内存中

• 类型：Function

• 详细：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。

2、 mounted : 实例出现在页面中

• 类型 : Function

• 详细 : 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

( 注意 mounted不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在mounted内部使用 vm.$nextTick：)

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

该钩子在服务器端渲染期间不被调用。

3、updated : 实例更新

• 类型 : Function

• 详细 : 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

( 注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：)

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}

该钩子在服务器端渲染期间不被调用。

4、destroyed : 实例从页面和内存中消亡了

• 类型 : Function

• 详细 : 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

该钩子在服务器端渲染期间不被调用。

生命周期图示

七、props

props : 外部数据，也叫属性

• 类型 : Array | Object

• 详细 : props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
  代码示例 :

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

注 :

• message="n" : 传入字符串
• :message="n"传入this.n数据
• :fn="add"传入this.add函数