vue api详解

曾经终败给现在 2022-04-11 03:11 223阅读 0赞

**全局配置：**

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

Vue.config.silent = true

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

**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>