看Vue文档总结之路（二）
Vue的全局API（以下的所有链接均为转载）
- 1、Vue.extend( )：（创建一个 Vue 实例）【和普通的 new Vue 用el挂载一样】
- 2、Vue.nextTick( )：（等到数据更新后执行回调）
- 需要了解【微任务，宏任务】：
- 3、Vue.set( target, propertyName/index, value )：（设置Vue实例data里面的对象或者数组的数据并且更新视图）
- 4、Vue.delete( target, propertyName/index )：（删除Vue实例中的对象或者属性）
- 5、Vue.directive( id, [definition] )：（自定义 注册或获取全局Vue指令）
- 6、Vue.filter( id, [definition] )：（自定义过滤器）
- 7、Vue.component( id, [definition] )：（自定义组件）【太熟悉了】
- 8、Vue.use( plugin )：（把组件注册成 全局组件 ）
- 9、Vue.mixin( mixin )：（在全局组件中中混入 一个对象，当然也可以是局部，这个对象和实例的各个属性共用）
- 10、Vue.compile( template )：（编译函数）【实现太过于复杂，建议看帖子】
- 11、Vue.observable( object )：（创建一个可以响应式对象，的和Vuex的state属性很像）
- 12、Vue.version：（查看Vue的版本）
1、Vue.extend( )：（创建一个 Vue 实例）【和普通的 new Vue 用el挂载一样】
参数：{ option }
使用基础 Vue 构造器，创建一个"子类"。参数是一个包含组件选项的对象。
HTML：
<div id="mount-point"></div>
JS：
// 创建构造器
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>
2、Vue.nextTick( )：（等到数据更新后执行回调）
需要了解【微任务，宏任务】：
Event Loop（事件执行机制）：
同步代码 》微任务》宏任务
微任务对同步任务是从属关系，在同一个作用域的时候，要等同步代码执行完再执行微任务，再到红任务，而且，还要了解 主线程 的任务队列~
宏任务：
宏任务：
微任务：
微宏任务的详细解释（转载别人的）
使用原理：
Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。
当你设置 vm.someData = ‘new value’，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
this.$nextTick()的使用场景
3、Vue.set( target, propertyName/index, value )：（设置Vue实例data里面的对象或者数组的数据并且更新视图）
在 Vue实例 中得data属性可以是 数组 或者 对象，
在 Vue中 直接操作数组的下标，会改变数组得数据，但是不会更新页面中真实的DOM，
Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter / setter（Vue数据驱动源码），所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的
例如：
<div v-for="(item, index) of list">
{{ item }} ----- {{ index }}
</div>
var vm = new Vue({
el:"#app",
data: {
list: [1,2,3]
}
})
vm.list[3] = 4
//数组数据会有变化，但是页面不会更新
//如果要实现数据更新，要调用数组的方法
//（在Vue.js里面，数组（引用类型）的方法已经被二次封装了，可以进行数据驱动）
//或者用 vue.set 或者 this.$set
参数：( 要修改的目标对象/数组，属性名/索引下标，要修改成什么值 )
Vue.set()的详细介绍：
4、Vue.delete( target, propertyName/index )：（删除Vue实例中的对象或者属性）
用法：
删除 Vue实例 里面的数据，并且更新试图，vue.delete可以避免vue检测不到新的property
//delete 和 $delete 的区别
let arr1 = [1,2,3]
let arr2 = [1,2,3]
delete arr1[1]
this.$delete(arr2,2)
console.log(arr1) // [1, empty, 3]
console.log(arr2) // [1,2]
参数：（你要删除的对象 / 数组，要删除的属性名 / 索引）
5、Vue.directive( id, [definition] )：（自定义 注册或获取全局Vue指令）
注册组件也分为全局组件和局部组件：
参数：
（组件的名字，回调函数（绑定的元素，指令对象【自定义组件的信息】，Vue编译的虚拟节点））
//Vue组件中使用
<div>
<button v-myTest='"123"'>按钮1</button>
</div>
<script>
export default {
directives: {
myTest: {
bind (el, binding) {
// 为123就不显示，不是就显示
if (binding.value === '123') el.style.display = 'none'
}
}
}
}
Vue.directive()的详细用法和思路
6、Vue.filter( id, [definition] )：（自定义过滤器）
过滤器也分为全局过滤和局部过滤：
参数：（过滤器的名字，函数（要过滤的值））
<div id="app">
<p>电脑价格：{{price | addPriceIcon}}</p>
//电脑价格：￥200
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
price:200
},
filters:{
//处理函数
addPriceIcon(value){
console.log(value)//200
return '¥' + value
}
}
})
Vue.filter()的详细介绍和用法
7、Vue.component( id, [definition] )：（自定义组件）【太熟悉了】
组件也分为全局组件和局部组件
参数：（组件名，组件配置）
8、Vue.use( plugin )：（把组件注册成 全局组件 ）
通常是用于引入外部的别人封装的组件，拿到项目中自己用，类似于 Element-UI、Vant-UI等等
9、Vue.mixin( mixin )：（在全局组件中中混入 一个对象，当然也可以是局部，这个对象和实例的各个属性共用）
参数：（对象的配置）
Vue.mixin()的详细介绍和用法
与vuex的区别：
经过上面的例子之后，他们之间的区别应该很明显了哈~
vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。
与公共组件的区别：
同样明显的区别来再列一遍哈~
组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。
10、Vue.compile( template )：（编译函数）【实现太过于复杂，建议看帖子】
里面包含了：数据处理和双向绑定、模板编译、虚拟dom
实现原理（大白话）
11、Vue.observable( object )：（创建一个可以响应式对象，的和Vuex的state属性很像）
Vue.abservable()的详细介绍
12、Vue.version：（查看Vue的版本）
获取当前使用的vue版本号，其原理就是读取package.json中的version字段。
<template>
<div>
</div>
</template>
<script>
import Vue from 'vue'
// var version = Number(Vue.version.split('.')[0])
var version = Vue.version // 2.6.10
console.log(version)
// if (version === 2) {
// // Vue v2.x.x
// console.log(version)
// } else if (version === 1) {
// // Vue v1.x.x
// console.log(version)
// } else {
// // Unsupported versions of Vue
// console.log(version)
// }
export default {
data () {
return {}
},
methods: {
}
}
</script>