Taolin · 换个方式说明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()的最终结果一样。

使用场景：

经常使用的组件。注册成全局组件任意组件都可以访问

// 传入一个扩展构造器也可以
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中渲染后，自动执行该函数

CodeBlock Loading...

Vue.filter

注册全局过滤器。

过滤器场景：

用于文本格式化
时间格式化

CodeBlock Loading...

Vue.set

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

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

参数

CodeBlock Loading...

Vue.use

安装Vue插件。

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

CodeBlock Loading...

Vue.mixin

全局注册混入。

Vue.observable

相当于自定义vuex

Vue.version

说明Vue的版本号。

CodeBlock Loading...

// 模版 <div class="box"></div> // 逻辑 const tmp = Vue.extend({ template: '<h1>Hello, {{ name }}</h1>', data(){ return { name: "Taoya" } } }) // 通过构造器函数，创建一个Vue实例，然后挂在到一个元素上。 new tmp().$mount('.box');

// 传入一个扩展构造器也可以 Vue.component('组件名称', Vue.extend({/* ... */})) // 传入一个选项对象 Vue.component('组件名称', { /* ...组件对象 */ }) // 获取注册的组件 (始终返回构造器) var MyComponent = Vue.component('my-component')

// 例子 // 一个按钮点击之后更新文字 <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); //输出：新值 }); }

// 例子 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) // 数据已经更新，视图刷新 }, }