前提：
见惯了v-show v-if 也可以自己写v-自己的指令
比如v-copy 或者 v-focus 可以实现一键复制 或者 一键监听控件选中事件
使用：
自定义指令分为全局指令跟局部指令，区别就是全局生效还是局部生效，一个是定义在vue实例上的，一个是定义在组件内部的，写在data下面即可.
全局指令：
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
} })
局部指令：
data() {
rerurn{
}
},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
自定义指令有5个生命周期
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted：插入，被绑定元素插入父节点时调用
update：所在组件更新时触发
componentUpdate：父组件及子组件全部更新时触发
unbind：只调用一次，解绑时调用
参数：
示例
v-copy
Vue.directive("copy", {
bind(el, { value }) {
el.$value = value;
el.handler = () => {
el.style.position = 'relative';
if (!el.$value) {
// 值为空的时候，给出提示
alert('无复制内容');
return
}
// 动态创建 textarea 标签
const textarea = document.createElement('textarea');
// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
textarea.readOnly = 'readonly';
textarea.style.position = 'absolute';
textarea.style.top = '0px';
textarea.style.left = '-9999px';
textarea.style.zIndex = '-9999';
// 将要 copy 的值赋给 textarea 标签的 value 属性
textarea.value = el.$value
// 将 textarea 插入到 el 中
el.appendChild(textarea);
// 兼容IOS 没有 select() 方法
if (textarea.createTextRange) {
textarea.select(); // 选中值并复制
} else {
textarea.setSelectionRange(0, el.$value.length);
textarea.focus();
}
const result = document.execCommand('Copy');
if (result) alert('复制成功');
el.removeChild(textarea);
}
el.addEventListener('click', el.handler); // 绑定点击事件
},
// 当传进来的值更新的时候触发
componentUpdated(el, { value }) {
el.$value = value;
},
// 指令与元素解绑的时候，移除事件绑定
unbind(el) {
el.removeEventListener('click', el.handler);
},
});
20210917 瓜子前端二面，也会有手写代码，概念性的东西，或多或少都能答上来一部分或者相关东西，手写代码目前是短板，主要是对数组对象的各种新的api组合运用不连贯
