vue自定义指令之directives 钩子函数？

详情：

在组件中，和data平级，通过directives节点来定义自定义指令

这种自定义指令，只能在当前组件中使用，叫做私有自定义指令

---

内容：

比如，定义一个 v-color指令，来设置DOM元素的字体颜色。(注意这里v-(自己定义，语义化))

<template>
  <p v-color>hello world<p>
</template>

<script>
export default {
  directives: {
    color: {
      // 页面DOM渲染后，使用 v-color 指令的元素会调用一次bind函数
      bind: function (el) {
        // el 是使用 v-color 指令的DOM元素
        el.style.color = 'red'
      }
    }
  }
}
</script>

为自定义指令传参

上述的不够灵活、只能设置为红色；

我们可以通过自定义指令传参，动态来设置元素样式

<template>
  <div class="box">
    <p v-color="b">自定义指令示例</p>
    <div v-color="g">自定义指令示例</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      b: "blue",
      g: "green",
    };
  },
  directives: {
    color: {
      // 页面DOM渲染后，使用 v-color 指令的元素会调用一次bind函数
      bind: function (el, obj) {
        // el 是使用 v-color 指令的DOM元素
        // obj 对象的 value 属性，就是传递的 pink 参数
        el.style.color = obj.value;
        console.log("🚀 ~  obj.value", obj.value)  //blue green
      },
       update(el, obj) {
         el.style.color = obj.value;
      },
    },
  },
};
</script>

注意上述，应为bind函数只在页面执行一次，后续数据更新，bind并不会被调用

所以加上了update函数，这样后续数据更新 update函数会在DOM更新后会调用，（可以重新渲染，也可以简写为）

export default {
  directives: {
    color(el, obj) {
    	el.style.color = obj.value
    }
}

全局定义

// main.js中
// 函数写法
Vue.directive('color', function (el, obj) {
  el.style.color = obj.value
})

// 对象写法
Vue.directive('color', {
  bind (el, obj) {
    el.style.color = obj.value
  },
  update (el, obj) {
    el.style.color = obj.value
  },
  ......
})

---

钩子函数

在某一刻，能够自动执行的函数，就可以叫做钩子函数。

• bind：

• 只调用一次，在DOM树渲染之前执行，此时父节点为 null。

• inserted：

• 只调用一次，在插入到父节点之后执行，也就是在DOM树渲染之后执行，此时可以找到元素【比如让input获取焦点，必须写到这里】。这里可以进行DOM操作。

• update：

• 所在组件的 虚拟DOM（VNode） 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

• componentUpdated：

• 指令所在组件的 虚拟DOM（VNode） 及其子 虚拟DOM（VNode） 全部更新后调用。

• unbind：

• 只调用一次，指令与元素解绑时调用。

---