32 写过自定义指令吗？原理是什么

回答范例

1. Vue有一组默认指令，比如v-model或v-for，同时Vue也允许用户注册自定义指令来扩展Vue能力
2. 自定义指令主要完成一些可复用低层级DOM操作
3. 使用自定义指令分为定义、注册和使用三步：

• 定义自定义指令有两种方式：对象和函数形式，前者类似组件定义，有各种生命周期；后者只会在mounted和updated时执行
• 注册自定义指令类似组件，可以使用app.directive()全局注册，使用{directives:{xxx}}局部注册
• 使用时在注册名称前加上v-即可，比如v-focus

4. 我在项目中常用到一些自定义指令，例如：

• 复制粘贴 v-copy
• 长按 v-longpress
• 防抖 v-debounce
• 图片懒加载 v-lazy
• 按钮权限 v-premission
• 页面水印 v-waterMarker
• 拖拽指令 v-draggable

5. vue3中指令定义发生了比较大的变化，主要是钩子的名称保持和组件一致，这样开发人员容易记忆，不易犯错。另外在v3.2之后，可以在setup中以一个小写v开头方便的定义自定义指令，更简单了

基本使用

当Vue中的核心内置指令不能够满足我们的需求时，我们可以定制自定义的指令用来满足开发的需求

我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (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 />

钩子函数

1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
3. update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4. componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
5. 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>

应用场景

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

1. 防抖

    // 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>

2. 图片懒加载

设置一个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;

3. 一键 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;

4. 拖拽

    <div ref="a" id="bg" v-drag></div>
    
      directives: {
        drag: {
          bind() {},
          inserted(el) {
            el.onmousedown = (e) => {
              let x = e.clientX - el.offsetLeft;
              let y = e.clientY - el.offsetTop;
              document.onmousemove = (e) => {
                let xx = e.clientX - x + "px";
                let yy = e.clientY - y + "px";
                el.style.left = xx;
                el.style.top = yy;
              };
              el.onmouseup = (e) => {
                document.onmousemove = null;
              };
            };
          },
        },
      }

原理

• 指令本质上是装饰器，是 vue对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。
• 自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind

原理

1. 在生成 ast 语法树时，遇到指令会给当前元素添加 directives 属性
2. 通过 genDirectives 生成指令代码
3. 在 patch 前将指令的钩子提取到 cbs 中,在 patch 过程中调用对应的钩子
4. 当执行指令对应钩子函数时，调用对应指令定义的方法

vue3.2 自定义全局指令、局部指令

    // 在src目录下新建一个directive文件，在此文件夹下新建一个index.js文件夹，接着输入如下内容
    const directives =  (app) => {
      //这里是给元素取得名字，虽然是focus，但是实际引用的时候必须以v开头
      app.directive('focus',{
        //这里的el就是获取的元素
        mounted(el) {
          el.focus() 
         }
      })
    }
    
    //默认导出 directives
    export default directives

    // 在全局注册directive
    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import directives from './directives'
    
    const app = createApp(App)
    directives(app)
    
    app.use(store).use(router).mount('#app')

    <!-- 在你需要的页面进行自定义指令的使用 -->
    <template>
      <div class="container">
        <div class="content">
          <input type="text"  v-focus>
          内容
        </div>
      </div>
    </template>
    
    <script setup>
    import { reactive, ref } from 'vue'
    // const vMove:Directive = () =>{
    
    // }
    </script>

在vue3.2 setup语法糖模式下，自定义指令变得及其简单

    <input type="text" v-model="value" v-focus>
    
    <script setup>
    //直接写，但是必须是v开头
    const vFocus = {
      mounted(el) {
        // 获取input，并调用其focus()方法
        el.focus()
      }
    }
    </script>

    <!-- demo 进去页面自动获取焦点，然后让盒子的颜色根据你input框输入的内容变色，并且作防抖处理 -->
    
    <template>
      <div class="container">
        <div class="content" v-move="{ background: value }">
          内容
          <input type="text" v-model="value" v-focus @keyup="see">
        </div>
      </div>
    </template>
    
    <script setup>
    import { reactive, ref } from 'vue'
    const value = ref('')
    
    const vFocus = {
      mounted(el) {
        // 获取input，并调用其focus()方法
        el.focus()
      }
    }
    
    let timer = null
    
    const vMove = (el, binding) => {
      if (timer !== null) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        el.style.background = binding.value.background
        console.log(el);
      }, 1000);
    }
    
    </script>
    
    <style lang="scss" scoped>
    .container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    
      .content {
        border-top: 5px solid black;
        width: 200px;
        height: 200px;
        cursor: pointer;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
      }
    }
    </style>