当面试官说讲一下Vue全局配置与全局API,我懵了!

·  阅读 512
当面试官说讲一下Vue全局配置与全局API,我懵了!

全局配置

vue.config 是全局配置对象

silent

  • 类型:boolean
  • 默认值:false
  • 用法
VUE.config.silent = true
复制代码

是否取消Vue所有的日志与警告

optionMergeStrategies

自定义合并策略的选项,影响每一个Vue实例。

  • 类型:{ [key: string]: Function }
  • 默认值:{}
  • 用法
Vue.config.optionMergeStrategies._my_option=function(parent,child,vm){
	return child+1;
}
var p = Vue.extend({
	_my_option:1
});
// p.options._my_option = 2;

复制代码

devtools

配置是否允许vue-devtools检查代码,默认为true(生产版为false)

Vue.config.dectools = true
复制代码

errorHandler

指定组件渲染和观察期间未捕获错误的处理函数。处理函数可以获取到错误信息和Vue实例。

Vue.config.errorHandler = function(err,vm,info){
	// 处理错误
}

复制代码

包含:

  1. 组件生命周期里的错误
  2. 自定义事件处理函数内部的错误

在生产环境中还是喜欢错误发生时直接打印在控制台。

warnHandler

定义运行时警告的处理函数。只在生产环境下生效。

Vue.config.warnHandler = function(msg,vm,trace){
	// 处理	,
	// trace 组件继承的关系追踪
}

复制代码

ignoredElements

忽略Vue之外的之定义元素。否则,会抛出错误。

Vue.config.ignoredElements = {
	'my-web-component',                  // 忽略‘my-web-component’
	/^myElement/,                        // 忽略以myElement开头的元素
}

复制代码

keyCode

自定义键位别名。

	'my-click':177,
	up:[33,45]
}

复制代码

performance

初始化、编译、打补丁的性能追踪

Vue.config.performance = false;

复制代码
  1. 适用于开发模式和支持performance.mark的浏览器。
  2. 在浏览器开发工具的性能/事件线面板展示。

productionTip

设置vue启动是生成生产提示

Vue.config.productionTip = false;

复制代码

全局PI

extend

  • 参数:

{Object} options

  • 用法:

使用基础Vue构造器,创建一个“子类”。参数是一个包含组件选择的对象。data选项是特例,需要注意在 Vue.extend() 中她必须是函数。

var temp = Vue.extend({
	template:`<div>hello world<p>{{name}}</p></div>`,
	data(){
		return {
			name:'孟凡'
		}
	}
});
new temp().$mount("#app");

复制代码

nextTick

  • 参数:

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

  • 用法:

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

methods:{
	updateName(){
		this.name = '孟凡';
		Vue.nextTick()
		.then(function(){
			// dom 更新了
		})
	}
}

复制代码

set

  • 参数:

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

  • 返回值:设置的值
  • 用法:

向响应式对象中添加属性,该属性也是响应式的。
Vue.set(Object|Array,String|Number,any)

// 
updateUser(){
  Vue.set(this.user,"name","004");
}

复制代码
  1. 触发视图更新,不能用于普通的新增属性
  2. 对象不能使Vue实例或者实例的跟数据对象。

delete

  • 参数:

Vue.delete(Object|Array,String|number)

  • 用法:
Vue.delete(this.user,'name');

复制代码

directive

  • 参数:

Vue.directive(String,Function|Object)

  • 用法:

注册或获取全局指令

// 注册,钩子函数均可选
Vue.directive('my-directive',{
	bind:function(){
		//调用一次,初始化设置
	},
	inserted:function(){
		// 绑定元素插入父元素时调用
	},
	update:function(){
		//所在组件更新时调用。
	},
	componentUpdated:function(){
		//所在组件以及子VNode更新时调用。
	},
	unbind:function(){
		//调用一次,与元素解绑时调用。
	}
});
// 注册,默认会调用bind、update
Vue.directive("my-test",function(){
	// bind、update
});
// 获取指令
var myDirective = Vue.directive('my-test');

复制代码
  1. 钩子函数参数(el,binding,vnode,oldVnode)\
  2. el:为绑定元素DOM\
  3. binding:包含只读属性的一个对象(name、value、oldValue…)

filter

  • 参数:

Vue.filter(String,Function)

  • 用法:

注册或获取全局过滤器。进行文本格式化。

Vue.filter('my-filter',function(value){
	// 返回的值
});
var myFilter = Vue.filter('my-filter');
// 使用
{{name|myFilter }}
<div v-bind:id="id|myFilter('arg') "></div>

复制代码
  1. 两处:{{}}和 v-bind表达式\
  2. 可使用操作链,以|指示\
  3. 接收多个参数,arg为第二个参数。

component

  • 参数:

Vue.component(String,Function|Object)

  • 用法:

注册或获取组件。

//显示传入构造器
Vue.component('my-component',Vue.extend({}));
// 传入选项对象,默认调用
Vue.component('my-component',{});
// 获取
var myComponent = Vue.component('my-component');

复制代码

use

  • 参数:

{Object | Function} plugin

  • 用法:
Vue.use(myPlugin);
// 开发组件
MyPlugin.install = function(Vue,options){
	Vue.myMethods = function(){
		// 添加全局方法、属性
	}
	Vue.directive('directive',function(){
		// 添加全局指令
	})
}

复制代码
  1. 插件是一个对象,必须提供install方法。\
  2. 插件是一个函数,会被作为install方法。\
  3. 须在new Vue()之前调用。

mixin

  • 参数:

{Object} mixin

  • 用法:
	created:function(){
		// 一些行为
	}
});

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

compile

  • 参数:

{string} template

  • 用法:

编译模板字符串。只在独立构建时有用。

var res = Vue.compile('<div>{{name}}</div>');
new Vue({
	data(){
		return {
			name:''
		}
	},
	render:res.render,
});

复制代码

眼过千遍不如手过一遍

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改