vue api详解

全局配置：

silent: true 或者 false， 脚手架生成默认为false  （取消 Vue 所有的日志与警告。）

Vue.config.silent = true

optionMergeStrategies：用于自定义选项的合并策略，Vue已经预定义了一些自己配置项的合并策略，extend,extends和mixins三种方式接收的options,最终都是通过mergeOptions进行合并的

var strats = config.optionMergeStrategies;
strats.props =
strats.methods =
strats.computed = function (parentVal, childVal) {
  if (!childVal) { return Object.create(parentVal || null) }
  if (!parentVal) { return childVal }
  var ret = Object.create(null);
  extend(ret, parentVal);
  extend(ret, childVal);
  return ret
};

 errorHandler：可以进行全局错误收集,我们可以根据这个特性对前端异常做这样的处理：业务错误直接写在业务里；代码错误、ajax请求异常等错误可以进行全局捕获然后抛出，不至于前端页面挂掉

import Vue from 'vue'
//系统错误捕获
const errorHandler = (error, vm)=>{
  console.error('抛出全局异常');
  console.error(vm);
  console.error(error);
  
}

Vue.config.errorHandler = errorHandler;
Vue.prototype.$throw = (error)=> errorHandler(error,this);

 如果是ajax异步请求，异常需要通过this.$throw()手动抛出

productionTip：设置为 false 以阻止 vue 在启动时生成生产提示。脚手架默认生成false

Vue.config.productionTip = false

全局 API:

 extend:使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器。

let options = {
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    data: function () {
        return {
            firstName: 'Walter',
            lastName: 'White',
            alias: 'Heisenberg'
        }
    },
    created(){
        console.log('onCreated-1');
    }
};

 

​
let BaseComponent = Vue.extend(baseOptions);
//基于基础组件BaseComponent,再扩展新逻辑.
new BaseComponent({
    created(){
        //do something
        console.log('onCreated-2');
    }
    //其他自定义逻辑
});
new BaseComponent().$mount('#mount-point')//将baseComponent实例化 挂载到mount-point

​

mixin:全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为

Vue.mixin({
  updated : function() {
    console.log("全局updated");
  }
});

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

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

delete:删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。在 2.2.0+ 中同样支持在数组上工作

directive:自定义指令或者获取全局指令,Vue.directive要在实例初始化之前，不然会报错，还有，定义的指令不支持驼峰式写法，也会报下面同样的错，钩子函数：bind inserted update componentUpdated unbind

Vue.directive('focus', {//元素一渲染就自动聚焦

  inserted: function (el) {

    el.focus()
  }
})
//使用
<input v-focus>

filter:注册或获取全局过滤器

Vue.filter('my-filter', function (value) {//注册

})

var myFilter = Vue.filter('my-filter')//获取

component:注册获取全局组件

Vue.component('my-component', Vue.extend({ /* ... */ }))
Vue.component('my-component', { /* ... */ })
var MyComponent = Vue.component('my-component')

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

局部api：

mixins:选项接受一个混合对象的数组。局部混入，这些混合实例对象可以像正常的实例对象一样包含选项,他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。（混入执行顺序：全局混入语句>局部混入语句>原本的语句）

<div id="app">
        {{num}}
        <button @click="add">addNumber</button>
    </div>
    <script type="text/javascript">
        var mixin = {
            updated: function() {
                console.log("局部混合updated");
            }
        };
        new Vue({
           el: "#app",
            data: {
                num : 1
            },
            methods : {
                add : function() {
                    this.num++;
                }
            },
            updated : function(){
              console.log('原生updated');
            },
            mixins: [mixin]
        });

    </script>