Vue全局API

#Vue.extend( options )
参数是一个Object对象
使用在基础的Vue构造器，创建一个子类，data选项是特例，在Vue.extend()中它必须是函数

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

结果如下

<p>Walter White aka Heisenberg</p>

#Vue.nextTick( [callback, context] )

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
侧重点是获取更新后的DOM
言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题

什么时候需要用的Vue.nextTick()

1. 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
2. 你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

#Vue.set( target, propertyName/index, value )
设置的属性对象 可以是Object或者数组
设置的key值可以 string或者number类型
设置的值可以是任意值

—code示例—
vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；
Vue文档有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新.,代码示例如下：

<div id="app">
  <ul>
    <li>{{obj.name}}</li>	
    	<li>{{obj.age}}</li>		
    	<li>{{obj.sex}}</li>		
    	<li>{{obj.info.content}}</li>
  </ul>
</div>

<script>
  let vm = new Vue({
    el:'#app',
    data() {
      return {
        obj:{name: "SMlZ",age: '3', info: {content: 'my name is smlz'}}
        }
    },
    mounted(){
      this.obj.sex = 'female' // 可以设置成功因为值设置成功了，但值没有属性，
      //如果后续更改这个值,比如在button上点击事件视图是不会更新的
      console.log(this.obj)
      this.$set(this.obj.info,'content', 'who is my girlfriend?')// 能设置成功
    }
  });
</script>

// 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

Vue.filter（id，[definition]）
参数 传一个 字符串的id
一个定义过滤的函数或者自定义的方法

// 注册
Vue.filter('my-filter', function (value) {
  // 返回处理后的值
})

// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

Vue.component( id, [definition] )
参数 一个字符形式的 id
一个定义组件的函数 或者一个对象

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}

var version = Number(Vue.version.split('.')[0])

if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // Unsupported versions of Vue
}