面试官：你有写过自定义指令吗？自定义指令的应用场景有哪些？

矫情吗；* 2022-12-29 14:09 186阅读 0赞

![format_png][]

## 一、什么是指令 ##

开始之前我们先学习一下指令系统这个词

**指令系统**是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力

在`vue`中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统

我们看到的`v-`开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能

除了核心功能默认内置的指令 (`v-model` 和 `v-show`)，`Vue` 也允许注册自定义指令

指令使用的几种方式：

//会实例化一个指令，但这个指令没有参数 
    `v-xxx`
    
    // -- 将值传到指令中
    `v-xxx="value"`  
    
    // -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'"`
    `v-xxx="'string'"` 
    
    // -- 传参数（`arg`），如`v-bind:class="className"`
    `v-xxx:arg="value"` 
    
    // -- 使用修饰符（`modifier`）
    `v-xxx:arg.modifier="value"`

### 二、如何实现 ###

注册一个自定义指令有全局注册与局部注册

全局注册注册主要是用过`Vue.directive`方法进行注册

`Vue.directive`第一个参数是指令的名字（不需要写上`v-`前缀），第二个参数可以是对象数据，也可以是一个指令函数

// 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        // 聚焦元素
        el.focus()  // 页面加载完成之后自动让输入框获取到焦点的小功能
      }
    })

局部注册通过在组件`options`选项中设置`directive`属性

directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
        }
      }
    }

然后你可以在模板中任何元素上使用新的 `v-focus` property，如下：

<input v-focus />

自定义指令也像组件那样存在钩子函数：

*  `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` 钩子中可用

> 除了 `el` 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 `dataset` 来进行

举个例子：

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
    <script>
        Vue.directive('demo', function (el, binding) {
        console.log(binding.value.color) // "white"
        console.log(binding.value.text)  // "hello!"
        })
    </script>

## 三、应用场景 ##

使用自定义组件组件可以满足我们日常一些场景，这里给出几个自定义组件的案例：

*  防抖
 *  图片懒加载
 *  一键 Copy的功能

### 输入框防抖 ###

防抖这种情况设置一个`v-throttle`自定义指令来实现

举个例子：

// 1.设置v-throttle自定义指令
    Vue.directive('throttle', {
      bind: (el, binding) => {
        let throttleTime = binding.value; // 防抖时间
        if (!throttleTime) { // 用户若不设置防抖时间，则默认2s
          throttleTime = 2000;
        }
        let cbFun;
        el.addEventListener('click', event => {
          if (!cbFun) { // 第一次执行
            cbFun = setTimeout(() => {
              cbFun = null;
            }, throttleTime);
          } else {
            event && event.stopImmediatePropagation();
          }
        }, true);
      },
    });
    // 2.为button标签设置v-throttle自定义指令
    <button @click="sayHello" v-throttle>提交</button>

### 图片懒加载 ###

设置一个`v-lazy`自定义组件完成图片懒加载

const LazyLoad = {
        // install方法
        install(Vue,options){
           // 代替图片的loading图
            let defaultSrc = options.default;
            Vue.directive('lazy',{
                bind(el,binding){
                    LazyLoad.init(el,binding.value,defaultSrc);
                },
                inserted(el){
                    // 兼容处理
                    if('InterpObserver' in window){
                        LazyLoad.observe(el);
                    }else{
                        LazyLoad.listenerScroll(el);
                    }
                    
                },
            })
        },
        // 初始化
        init(el,val,def){
            // src 储存真实src
            el.setAttribute('src',val);
            // 设置src为loading图
            el.setAttribute('src',def);
        },
        // 利用InterpObserver监听el
        observe(el){
            let io = new InterpObserver(entries => {
                let realSrc = el.dataset.src;
                if(entries[0].isIntersecting){
                    if(realSrc){
                        el.src = realSrc;
                        el.removeAttribute('src');
                    }
                }
            });
            io.observe(el);
        },
        // 监听scroll事件
        listenerScroll(el){
            let handler = LazyLoad.throttle(LazyLoad.load,300);
            LazyLoad.load(el);
            window.addEventListener('scroll',() => {
                handler(el);
            });
        },
        // 加载真实图片
        load(el){
            let windowHeight = document.documentElement.clientHeight
            let elTop = el.getBoundingClientRect().top;
            let elBtm = el.getBoundingClientRect().bottom;
            let realSrc = el.dataset.src;
            if(elTop - windowHeight<0&&elBtm > 0){
                if(realSrc){
                    el.src = realSrc;
                    el.removeAttribute('src');
                }
            }
        },
        // 节流
        throttle(fn,delay){
            let timer; 
            let prevTime;
            return function(...args){
                let currTime = Date.now();
                let context = this;
                if(!prevTime) prevTime = currTime;
                clearTimeout(timer);
                
                if(currTime - prevTime > delay){
                    prevTime = currTime;
                    fn.apply(context,args);
                    clearTimeout(timer);
                    return;
                }
    
                timer = setTimeout(function(){
                    prevTime = Date.now();
                    timer = null;
                    fn.apply(context,args);
                },delay);
            }
        }
    
    }
    export default LazyLoad;

### 一键 Copy的功能 ###

import { Message } from 'ant-design-vue';
    
    const vCopy = { //
      /*
        bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置
        el: 作用的 dom 对象
        value: 传给指令的值，也就是我们要 copy 的值
      */
      bind(el, { value }) {
        el.$value = value; // 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到
        el.handler = () => {
          if (!el.$value) {
          // 值为空的时候，给出提示，我这里的提示是用的 ant-design-vue 的提示，你们随意
            Message.warning('无复制内容');
            return;
          }
          // 动态创建 textarea 标签
          const textarea = document.createElement('textarea');
          // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
          textarea.readOnly = 'readonly';
          textarea.style.position = 'absolute';
          textarea.style.left = '-9999px';
          // 将要 copy 的值赋给 textarea 标签的 value 属性
          textarea.value = el.$value;
          // 将 textarea 插入到 body 中
          document.body.appendChild(textarea);
          // 选中值并复制
          textarea.select();
          // textarea.setSelectionRange(0, textarea.value.length);
          const result = document.execCommand('Copy');
          if (result) {
            Message.success('复制成功');
          }
          document.body.removeChild(textarea);
        };
        // 绑定点击事件，就是所谓的一键 copy 啦
        el.addEventListener('click', el.handler);
      },
      // 当传进来的值更新的时候触发
      componentUpdated(el, { value }) {
        el.$value = value;
      },
      // 指令与元素解绑的时候，移除事件绑定
      unbind(el) {
        el.removeEventListener('click', el.handler);
      },
    };
    
    export default vCopy;

关于自定义组件还有很多应用场景，如：拖拽指令、页面水印、权限校验等等应用场景

## 参考文献 ##

*  https://vue3js.cn/docs/zh
 *  https://juejin.cn/post/6844904197448531975\#heading-5
 *  https://www.cnblogs.com/chenwenhao/p/11924161.html\#\_label2

面试官VUE系列总进度：20／33

[面试官：Vue实例挂载的过程中发生了什么?][Vue]

[面试官：Vue中的$nextTick怎么理解?][Vue_nextTick]

[面试官：说说你对vue的mixin的理解，有哪些应用场景？][vue_mixin]

[面试官：说说你对slot的理解？slot使用场景有哪些？][slot_slot]

[面试官：说说对observable的理解][observable]

[面试官：说说为什么要在列表组件中写 key，其作用是什么？][key]

[面试官：说说你对keep-alive的理解是什么？怎么缓存当前的组件？缓存后怎么更新？][keep-alive]

[面试官：Vue常用的修饰符有哪些?有什么应用场景?][Vue 1]

篇副有限，扫下方二维码查看往期

![format_png 1][]

[format_png]: /images/20221120/e10d1a3b34a54a11849df2e8d0dbc4bf.png
[Vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1e5cb6748f3511e98045534c4631c86b13c5f2f6de0290ba7b992913127070090a02e7b&idx=1&mid=2247484339&scene=21&sn=4ce6450e946dc44230ab99934396db10#wechat_redirect
[Vue_nextTick]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c19ecb674888b80b27c2b7e8bde37c81150ba417613037d7811ffd1cdd33610f63686892&idx=1&mid=2247484360&scene=21&sn=d505ec934b88d7108cac139b3b047024#wechat_redirect
[vue_mixin]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c18dcb67489bcc89f4ba25b2ac35fd6e589b8ab40e2118ba043554ad2cc4053ab2dd3b92&idx=1&mid=2247484379&scene=21&sn=d50794bbaa957339a92b7e4b58acd5e8#wechat_redirect
[slot_slot]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1a7cb6748b1b4b1df7782e30301e55b9d4d5331e4b39124cdc869d47db5a28d5194b162&idx=1&mid=2247484401&scene=21&sn=ca97df335499c6b930ee2b5172524234#wechat_redirect
[observable]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1a8cb6748be745c18710a9e5895b0d5885e938e00106da13ed9d77a1b9bc5866d8a6472&idx=1&mid=2247484414&scene=21&sn=a62897b3506dc7082ef3b4c9cb817e7b#wechat_redirect
[key]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c65ccb674f4a81c25aa5d80a7df95e83216f2360185783e9087e9b3c0e46f0daba85d15f&idx=1&mid=2247484426&scene=21&sn=41c9b6a3bd335f5cc23d7c636520da11#wechat_redirect
[keep-alive]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c648cb674f5efbdad8222de6cd607870e44d5870480a229bfeefd6a78c3ba3b9d372ab37&idx=1&mid=2247484446&scene=21&sn=80d5a4a15c88f4d6fd878095101601e8#wechat_redirect
[Vue 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c663cb674f756a3f270d8e017dd7a773a5933afa35f11356fe42b67afe836003207851d6&idx=1&mid=2247484469&scene=21&sn=921d55282359ac4a16c077bbe5946628#wechat_redirect
[format_png 1]: /images/20221120/2b496844e69e4db58d3fda30090161ff.png