Javascript is required
换个方式说明Vue全局API
前端

Vue.extend

主要用途生成组件。使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

// 模版
<div class="box"></div>

// 逻辑
const tmp =  Vue.extend({
  template: '<h1>Hello, {{ name }}</h1>',
  data(){
    return {
      name: "Taoya"
    }
  }
})

// 通过构造器函数，创建一个Vue实例， 然后挂在到一个元素上。
new tmp().$mount('.box');

Vue.extend只是创建一个构造器，这个构造器预设一些参数，这个构造器创建可复用的组件。其主要用来服务于Vue.component，用来生成组件。

Vue.component

注册全局组件。其会自动判断第二个传进来的是Vue继承对象（vue.extend(baseOptions)）还是普通对象(baseOptions)

如果传进来的是普能对象的话会自动调用Vue.extend，所以你先继承再传，还是直接传普通对象对Vue.component()的最终结果一样。

使用场景：

  1. 经常使用的组件。注册成全局组件任意组件都可以访问
// 传入一个扩展构造器也可以
Vue.component('组件名称', Vue.extend({/* ... */}))

// 传入一个选项对象
Vue.component('组件名称', {
  /*
    ...组件对象
  */
})

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

Vue.extend()和Vue.component()的区别

Vue.component 创建的组件可以复用，和web组件一样，不需要polyfill。

要注册一个组件的步骤：

第一步，使用Vue.extend创建一个Vue的子类构造函数；

第二步，使用Vue.compontent方式注册该构造函数；

第三步，在标签中使用它。

Vue.nextTick

Vue.nextTick( [callback, context] )

{Function} [callback]
{Object} [context]

官方：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

理解：

extTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：**当数据更新了，在dom中渲染后，自动执行该函数

// 例子
// 一个按钮点击之后更新文字

<button 
@click="testClick()" 
ref="btn"
> {{ testMsg }} </button>

// 方法
testClick(){
  let that = this;

  this.testMsg = '修改了哦'
  // Dom还没有更新
  console.log(this.$refs.btn.innerText); //输出：原始值
    
  Vue.nextTick(function(){
    console.log(that.$refs.btn.innerText); //输出：新值
  });
}

// Promise用法
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

Vue.filter

注册全局过滤器。

过滤器场景：

  1. 用于文本格式化
  2. 时间格式化
// js部分
Vue.filter('money', function(value){
  return '$ '+ value
})

// 模版
// 双花括号 由管道符 ｜ 表示
{{ 50 | money }}

Vue.set

Vue无法探测到对象数组的数据变化，导致视图无法更新。

那么就需要 Vue.set 来完成对视图的更新。

参数

Vue.set( target, propertyName/index, value )
{Object | Array} target
{string | number} propertyName/index
{any} value

// 例子
methods: {\
  // 对数据的下标进行赋值并不会改变视图。
  btn1Click(){
    this.items[0]={message:"直接更新消息1",id:'10'}
    console.log(this.items) // 数据已经更新，但是视图未刷新
  },
  btn2Click(){
      Vue.set(this.items, 0, { message: 'Vue.set更新消息1', id: '11' })
      console.log(this.items) // 数据已经更新，视图刷新
  },
}

Vue.use

安装Vue插件。

比如路由插件VueRouter, Vuex进行状态管理

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vues) // 注册

...

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router'

Vue.use(Router);

const routes = [
    
]

export default router = new Router({
  routes,
})

Vue.mixin

全局注册混入。

Vue.observable

相当于自定义vuex

Vue.version

说明Vue的版本号。

var version = Vue.version
console.log(version, typeof(version));

// 2.6.10 string