全局api

Vue.extend(options)

• 参数：

  • {Object} options

• 用法：

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

  data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

<div id="mount-point"></div>

// 创建构造器
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])

• 参数：
  • {Function} [callback]
  • {Object | Array} target
• 用法：

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

    testClick(){
      this.testMsg="修改后的值";
      this.$nextTick(function(){
        console.log(that.$refs.aa.innerText);  //输出：修改后的值
      });
    }

注意

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

• 作为一个Promise使用

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

• 什么时候需要用到Vue.nextTick()？

1. 当你需要在Vue的生命周期created()钩子函数中进行DOM操作时，一定要将操作放在Vue.nextTick()的回调函数中。原因是在created()钩子函数执行时DOM还未渲染，此时是获取不到DOM的，这时候就需要用到Vue.nextTick()方法了。

created(){
    this.$nextTick(function(){  //不使用this.$nextTick()方法会报错
   		 that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
    });
},

2. 当项目中你想在改变DOM元素的数据后基于新的dom做点什么，**对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；**通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

changeTxt(){
    this.testMsg="修改后的文本值";
    this.$nextTick(function(){  //使用vue.$nextTick()方法可以dom数据更新后延迟执行
        let domTxt=document.getElementById('h').innerText; 
        console.log(domTxt);  // 如果不使用nextTick()方法这里打印的是原始值而不是修改后的值
    });
},

• Vue.nextTick() 使用原理

原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOM操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。

当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

Vue.set(target, propertyName/index, value)

• 参数：

  • {Object | Array} target
  • {string | number} propertyName/index
  • {any} value

• 返回值：设置的值。

• 用法：

  向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

// 数组 items: ["a", "b", "d", "123"],
// 更改数组第一位的值
this.$set(this.items, 0, "value") // ["value", "b", "d", "123"]
// 给数组添加值
this.$set(this.item, 4, "value") // ["a", "b", "d", "123", "value"]
// 对象同理

注意

对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

Vue.delete(target, propertyName/index)

参数：

• {Object | Array} target
• {string | number} propertyName/index

用法：

删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制，但是你应该很少会使用它。

// 数组 items: ["a", "b", "d"]
this.$delete(this.items, 0) // ["b", "d"]

警告

目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。

Vue.directive(id, [definition])

• 参数：

  • {string} id
  • {Function | Object} [definition]

• 用法：

  注册或获取全局指令。

  // 注册
  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')
  

  局部注册：

  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  }
  
  // 然后可以在模板中任意元素上使用：v-focus
  

• 钩子函数
  • bind ：只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。
  • inserted：被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
  • update：被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新。
  • componentUpdate：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind：只调用一次，指令元素解绑的时候调用。

• 参考：自定义指令 (opens new window)

Vue.filter(id, [definition])

• 参数：

  • {string} id
  • {Function} [definition]

• 用法：

  注册或获取全局过滤器。

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

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

• 参考：过滤器 (opens new window)
• 也可以参考我的另一篇文章filters过滤器的使用 (opens new window)

Vue.component(id, [definition])

• 参数：

  • {string} id
  • {Function | Object} [definition]

• 用法：

  注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称

  // 注册组件，传入一个扩展过的构造器
  Vue.component('my-component', Vue.extend({ /* ... */ }))
  
  // 注册组件，传入一个选项对象 (自动调用 Vue.extend)
  Vue.component('my-component', { /* ... */ })
  
  // 获取注册的组件 (始终返回构造器)
  var MyComponent = Vue.component('my-component')
  

Vue.use(plugin)

• 参数：

  • {Object | Function} plugin

• 用法：

  安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

  该方法需要在调用 new Vue() 之前被调用。

  当 install 方法被同一个插件多次调用，插件将只会被安装一次。

• 参考：插件 (opens new window)

Vue.mixin(mixin)

• 参数：

  • {Object} mixin

• 用法：

  全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。

• 参考：全局混入 (opens new window)

• 也可以参考我的另一篇文章mixin的使用 (opens new window)

Vue.compile(template)

• 参数：

  • {string} template

• 用法：

  将一个模板字符串编译成 render 函数。

  var res = Vue.compile('<div><span>{{ msg }}</span></div>')
  
  new Vue({
    data: {
      msg: 'hello'
    },
    render: res.render,
    staticRenderFns: res.staticRenderFns
  })
  

• 参考：渲染函数 (opens new window)

Vue.observable(object)

• 参数：

  • {Object} object

• 用法：

  让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

  返回的对象可以直接用于渲染函数 (opens new window)和计算属性 (opens new window)内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：

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

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

注意

在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更，所以如这里展示的 (opens new window)，它和被返回的对象是同一个对象。在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。因此，为了向前兼容，我们推荐始终操作使用 Vue.observable 返回的对象，而不是传入源对象。

• 参考：深入响应式原理 (opens new window)