一. vue3中的ref和reactive

vue3跟vue2相比，vue2可以定义自面量对象，但vue3就没有这个data这个函数，因此vue3的ref和reactive都是定义类型数据来使用的，相当于vue2的字面量对象吧

1. 下面先说下vue3的ref吧

ref是定于简单数据类型和引用数据类型的数据的，例如:Number String Boolean undefined null 还有我们引用数据类型例如：数组，对象等等……

请看下图

2. 下面再说下reactive吧

ref是定于复杂数据类型的，例如:Array Object 等等……

请看下图

注意：
ref可以定义复杂数据类型的和简单数据类型的，但是reactive只能定义复杂数据类型，之所以ref可以定义复杂数据类型是因为ref里面有一个判断，当他不是简单数据类型的时候就会走reactive的这个来定义，而reactive里面是没有这个判断的

二. vue3中的自定义指令和vue2中的自定义指令

自定义指令是分为全局 和 局部 的自定义指令的

1. 先说vue2中自定义指令

vue2

全局

在页面中这样写

 <!-- 自定义指令的时候都要以v-"属性名" -->
    <p v-color>张三</p>

在main.js里面这样写

 // 全局自定义指令
Vue.directive('color',{
  inserted(el,binding) {  // 插入时调用
    el.style.color = "red";
    el.style.background = "pink";
  },
  bind(el,binding){},  // 只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
  update(el,binding){},// 更新是调用
  componentUpdated(el,binding){},// 指令所在组件的VNode及其子VNode全部更新后调用
  unbind(el,binding){}, // 只调用一，指令与元素解绑的时候调用
})

局部

在页面中这样写

 <!-- 自定义指令的时候都要以v-"属性名" 'red'引号要加 -->
  <p v-color="'red'">张三</p>

<script>
export default {
  directives: {
    color: {
      inserted(el, binding) {
        // 生命周期解释:绑定到节点
        el.style.color = binding.value;
      },
      bind(el,binding){},  // 只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
      update(el,binding){},// 更新是调用
      componentUpdated(el,binding){},// 指令所在组件的VNode及其子VNode全部更新后调用
      unbind(el,binding){}, // 只调用一，指令与元素解绑的时候调用
    },
  },
};
</script>

2. 先说vue3中自定义指令

vue3

全局

在页面中这样写

 <template>
    <div>
        <button v-onceClick="10000" @click="btnClick">ClickMe</button>
    </div>
</template>

在main.js里面这样写

const app = createApp(App);

 // 全局自定义指令
app.directive('onceClick',{
    mounted(el, binding, vnode) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true;
                setTimeout(() => {
                    el.disabled = false;
                }, binding.value || 1000);
            }
        });
    }
})

局部

在页面中这样写

<template>
    <div>
        <button v-onceClick="10000" @click="btnClick">ClickMe</button>
    </div>
</template>

<script>
 
    import {ref} from 'vue';
 
    export default {
        name: "MyVue01",
        setup() {
            const a = ref(1);
            const btnClick = () => {
                a.value++;
            }
            return {a, btnClick}
        },
        directives: {
            onceClick: {
                mounted(el, binding, vnode) {
                    el.addEventListener('click', () => {
                        if (!el.disabled) {
                            el.disabled = true;
                            setTimeout(() => {
                                el.disabled = false;
                            }, binding.value || 1000);
                        }
                    });
                }
            }
        }
    }
</script>

vue3的钩子函数（7个）

• created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。

• beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。

• mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里。

• beforeUpdate：在更新包含组件的 VNode 之前调用。

• updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。

• beforeUnmount：在卸载绑定元素的父组件之前调用

• unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。 最常用的