钩子函数

了解指令前我们要知道钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。一段用以处理系统消息的程序。“钩子”就是在某个阶段给你一个做某些处理的机会。

特点

1.是个函数，在系统消息触发时被系统调用
2.不是用户自己触发的 钩子函数的名称是确定的，当系统消息触发，自动会调用。

局部 全局

全局注册 directive 和 局部注册 directives

了解局部和全局前我们要知道自定义指令需要使用一些钩子函数 触发某个状态
bind钩子：初始化设置。指令第一次绑定到元素上时执行
inserted钩子：绑定的元素加入到父节点时触发。不考虑有没有被渲染
update钩子： 在VNode更新时执行(VNode：虚拟dom节点)
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用
钩子函数中this：undefined

局部注册

<template>
<div id="home">
     <input type="text" v-focus>
</div>
</template>
<script>
export default{
    name:"home",
    directives:{
        focus:{
            //这个就是自定义的指令 v-focus
            //参数一：当前元素  二：绑定的一些相关信息
            //三:虚拟dom节点       四：上一个虚拟dom
            inserted(el,bind,vNode,oldvNode){
                //是元素获焦
                el.focus();
            }
        }
    },
}
</script> 

全局注册

//注册全局指令
Vue.directive('nameInfo',()=>{
  //自定义指令钩子函数
  
})

局部指令实现图片懒加载

     <!-- 需要渲染的数据 -->
  <div class="container">
      <img
        v-for="(item, index) in Imgdata"
        :key="index"
        :src="moren"
        v-lazy="item"
        alt="x"
      />
    </div>
    
    
    <script>
export default {
  data() {
    return {
      moren: "img/jzz.jpg", // 加载中的图片
      Imgdata: [
        "/img/1.png",
        "/img/2.png",
        "/img/3.png",
        "/img/4.png",
        "/img/5.png",
        "/img/6.png",
        "/img/7.png",
        "/img/8.png",
        "/img/9.png",
        "/img/10.png",
      ],
    };
  },
  directives: {
    lazy: {
      inserted(el, binding) {
        //定义一个观察器，entries为状态改变元素的数组
        let observer = new IntersectionObserver((entries) => {
          // 遍历
          for (let i of entries) {
            // 如果改元素处于可视区
            if (i.isIntersecting > 0) {
              // 获取该元素
              let img = i.target;
              // 重新设置src值
              img.src = binding.value;
              //取消对该元素的观察
              observer.unobserve(img);
            }
          }
        });
        // 为 img 标签添加一个观察
        observer.observe(el);
      },
    },
  },
};
</script>