-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
面试官:你有写过自定义指令吗?自定义指令的应用场景有哪些? #21
Comments
你好,上面的输入框防抖好像是节流来着?我记得防抖是,假设用户一直触发函数,并且小于等待时间,那最终防抖只会触发一次,节流的话,则是每隔等待时间结束后触发。 |
自定义指令更新机制可以大概描述一下吗? 能否做到手动控制更新钩子函数(update, componentUpdated)触发 |
是的,throttle是节流,debounce才是反抖 |
理论上 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
一、什么是指令
开始之前我们先学习一下指令系统这个词
指令系统是计算机硬件的语言系统,也叫机器语言,它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力
在
vue
中提供了一套为数据驱动视图更为方便的操作,这些操作被称为指令系统我们看到的
v-
开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能除了核心功能默认内置的指令 (
v-model
和v-show
),Vue
也允许注册自定义指令指令使用的几种方式:
二、如何实现
注册一个自定义指令有全局注册与局部注册
全局注册注册主要是用过
Vue.directive
方法进行注册Vue.directive
第一个参数是指令的名字(不需要写上v-
前缀),第二个参数可以是对象数据,也可以是一个指令函数局部注册通过在组件
options
选项中设置directive
属性然后你可以在模板中任何元素上使用新的
v-focus
property,如下:自定义指令也像组件那样存在钩子函数:
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)update
:所在组件的VNode
更新时调用,但是可能发生在其子VNode
更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新componentUpdated
:指令所在组件的VNode
及其子VNode
全部更新后调用unbind
:只调用一次,指令与元素解绑时调用所有的钩子函数的参数都有以下:
el
:指令所绑定的元素,可以用来直接操作DOM
binding
:一个对象,包含以下property
:name
:指令名,不包括v-
前缀。value
:指令的绑定值,例如:v-my-directive="1 + 1"
中,绑定值为2
。oldValue
:指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。expression
:字符串形式的指令表达式。例如v-my-directive="1 + 1"
中,表达式为"1 + 1"
。arg
:传给指令的参数,可选。例如v-my-directive:foo
中,参数为"foo"
。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar
中,修饰符对象为{ foo: true, bar: true }
vnode
:Vue
编译生成的虚拟节点oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用举个例子:
三、应用场景
使用自定义组件组件可以满足我们日常一些场景,这里给出几个自定义组件的案例:
输入框防抖
防抖这种情况设置一个
v-throttle
自定义指令来实现举个例子:
图片懒加载
设置一个
v-lazy
自定义组件完成图片懒加载一键 Copy的功能
关于自定义组件还有很多应用场景,如:拖拽指令、页面水印、权限校验等等应用场景
参考文献
The text was updated successfully, but these errors were encountered: