You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
constvm=newVue({data: {foo: 10},rules: {foo: {validate: value=>value>1,message: 'foo must be greater than one'}}})vm.foo=0// 输出 foo must be greater than one
Vue进阶系列汇总如下,欢迎阅读,欢迎加群讨论(文末)。
Vue 进阶系列(一)之响应式原理及实现
Vue 进阶系列(二)之插件原理及实现
使用方法
插件的详细使用方法详情看Vue官网
概括出来就是
Vue.use(MyPlugin)
使用,本质上是调用MyPlugin.install(Vue)
new Vue()
启动应用之前完成,实例化之前就要配置好。Vue.use
多次注册相同插件,那只会注册成功一次。源码解读
Vue.use
源码如下Vue.use
接受一个对象参数plugin
,首先判断是否已注册,如果多次注册相同插件那么只会注册成功一次,在注册成功后设置plugin.installed = true
。然后执行
toArray(arguments, 1)
方法,arguments
是一个表示所有参数的类数组对象,需要转换成数组之后才能使用数组的方法。上面进行了一次转换,假设
list
是[1, 2, 3, 4],start
是1,首先创建一个包含3个元素的数组,依次执行ret[2] = list[ 2 + 1]
、ret[1] = list[ 1 + 1]
、ret[0] = list[ 0 + 1]
,实际上就是去除arguments
的第一个参数然后把剩余的类数组赋值给新的数组,其实就是去除plugin
参数,因为调用plugin.install
的时候不需要这个参数。还可以通过如下几种方式实现类数组转换成数组,但是使用slice会阻止某些JavaScript引擎中的优化(参考自MDN)。
转换成数组之后调用
args.unshift(this)
,把Vue
对象添加到args的第一个参数中,这样就可以在调用plugin.install
方法的时候把Vue
对象传递过去。实例:实现一个插件
要求创建一个告诉Vue组件处理自定义
rules
规则选项的插件,这个rules
需要一个对象,该对象指定组件中的数据的验证规则。示例:
第一步先不考虑插件,在已有的
Vue
API中是没有rules
这个公共方法的,如果要简单实现的话可以通过钩子函数来,即在created
里面验证逻辑。可以通过
this.$options.rules
获取到自定义的rules
对象,然后对所有规则遍历,使用自定义的validate(newValue)
验证规则。第二步实现这个
rules
插件,为了在Vue
中直接使用,可以通过Vue.mixin
注入到Vue
组件中,这样所有的Vue
实例都可以使用。按照插件的开发流程,应该有一个公开方法
install
,在install
里面使用全局的mixin
方法添加一些组件选项,mixin
方法包含一个created
钩子函数,在钩子函数中验证this.$options.rules
。实现代码如下:
参考
交流
本人Github链接如下,欢迎各位Star
http://github.com/yygmind/blog
我是木易杨,现在是网易高级前端工程师,目前维护了一个高级前端进阶群,欢迎加入。接下来让我带你走进高级前端的世界,在进阶的路上,共勉!
The text was updated successfully, but these errors were encountered: