Vue3高阶API总结，什么是高阶函数

？高阶函数的英文名称是：HigherOrderfunction。一个函数可以接收一个或多个函数作为输入，或者输出一个函数，至少满足上述条件之一的函数称为高阶函数。前言本文内容知识点较多，讲解不够详细。不熟悉的可以看之前的文章，每个知识点都有专门的详细文章。建议读者收藏！1、mixinmixinmixin提供了一种非常灵活的方式来在vue组件中分发可重用的功能。混合对象可以包含任何组件选项。当一个组件使用一个mixin对象时，所有mixins对象的选项都会被混合到组件自身的选项中。mixins是一个数组，一个组件可以引入多个mixin对象。用法如：mixin的使用主要针对option-styleAPI，在vue3中使用相对较少。使用时注意事项：当使用mixin对象时，组件包含与mixin相同的选项，会被合并，不会被覆盖。当使用的mixin对象options与实例中的options具有相同的属性时，会选择就近原则，优先继承实例中的值，因此mixin对象的属性会被instance中的属性覆盖实例。mixin对象还可以添加生命周期钩子函数，这两个函数都会执行，先执行mixin中的，再执行实例中的。Mixin还可以自定义属性。如果与实例中的属性冲突，可以使用optionMergeStrategies选项来合并策略，自定义合并规则。2.用户自定义指令用户自定义指令分为全局用户自定义指令和局部用户自定义指令。2.1.自定义指令的定义全局自定义指令在vue3中，vue实例是通过createApp创建的，所以全局自定义指令的挂载方式也发生了变化，将指令挂载到app上。app.directive('focus',{mounted(el){el.focus()}})本地自定义指令constautoFocus={focus:{mounted(el){el.focus()}}}exportdefault{directives:autoFocus,自定义命令v-xxx可以直接使用，上面例子对应的自定义命令是v-focus。2.2.自定义指令钩子函数参数每个钩子中参数的含义：mounted(el,binding,vnode){...}el：表示当前使用指令的元素binding：指令传递的值vnode：当前元素节点related2.31.自定义指令钩子函数指令定义对象可以提供以下几个钩子函数（都是可选的，根据需要引入）created：在应用绑定元素属性或事件监听器之前调用。当指令需要附加需要在普通v-on事件侦听器之前调用的事件侦听器时，这很有用。beforeMounted：当指令首次绑定到元素时且在挂载父组件之前执行。mounted：绑定元素的父组件挂载后调用。beforeUpdate：在更新包含组件的VNode之前调用。updated：在包含组件的VNode及其子组件的VNode更新后调用。beforeUnmounted：在卸载绑定元素的父组件之前调用unmounted：仅在指令与元素解除绑定并且卸载父组件时调用一次。2.4.自定义命令参数自定义命令也可以有参数，参数可以是动态的，参数可以根据组件实例数据实时更新。使用方法如下：3.teleportportalteleportportal组件提供了一种简洁的方式来指定其内容父元素的内容。通俗地说，teleport中的内容可以让我们控制任何DOM，简单易用。使用语法：

to属性是指定传送中内容的DOM元素。可以是标签名、ID或类名。为什么要使用传送？使用vue开发时，多个组件不断嵌套，元素的样式或层级处理变得困难。如果我们需要添加一个modal模态框或者toast提示框，如果我们能把这样的框从vue组件中分离出来，那么我们设置样式和层级会更容易一些。有的同学会想，直接放在index.html里不是很好吗？另外，modal和toast元素需要使用vue组件的state值，通过state控制modal和toast的隐藏显示。如果直接放到index.html中，状态控制会很复杂。于是传送门组件就派上用场了。有点像《哆啦A梦》的任意门，可以将元素传送到任意元素。也可以使用vue组件内部的状态值来控制。4.setupsetup用于编写组合api，从生命周期钩子函数的角度来说，相当于替代了beforeCreate。将在创建之前执行。内部的属性和方法必须通过return暴露出来，才能挂载到实例上，否则没法使用。setup里面没有this，所以不能挂载和this相关的东西。它可以接收两个参数：props和context。设置特点：1.该函数会在创建前执行，上面已经说明。2.setup里面没有this，所以不能挂载this相关的东西。3.setup里面的属性和方法必须通过return暴露出来，否则没法使用。4.setup内部数据无响应。5、setup不能调用生命周期相关函数，但是生命周期函数可以调用setup中的函数。5、refref的主要作用是让基础类的数据响应式，使用前必须引入。在CompositionAPI中，数据是非响应式的，数据修改时view不会改变，所以在创建数据的时候，用ref包裹起来，让数据响应式。ref使用：import{ref}from"vue"exportdefault{setup(){letmood=ref("我现在心情不好！")setTimeout(()=>{mood.value="心情不好像人一样改变Beauty"},3000)return{mood}}}第六，reactive使引用类型的数据具有响应性。和上面ref的原理和用法是一致的。import{reactive}from"vue"letme=reactive({single:true,want:"暖炉一样的暖男"})7.readonly使数据只读，不能修改数据。在父子组件之间传递值时，Vue是一种单向数据流。为了防止子组件修改数据，数据用readonly包裹，保证只能在源数据上修改。import{readonly}from"vue"letme=readonly({single:true,want:"Iwantanobject"})8.toRefstoRefs用于解构ref和reactive包裹的响应式数据。使用：import{ref,reactive,toRefs}from"vue"letme=reactive({single:true,want:"温暖如火炉"})const{single,want}=toRefs(me)九、toRef在父子组件之间传递值时，有些参数是可选的。如果toRefs解构参数不存在，会报错。使用toRef来解决这个问题。使用：import{toRef}from"vue"constlove=toRef(obj,'love')解构时，先检查obj对象是否有love属性。如果存在，则继承obj对象中的属性值。如果它不存在，它将创建一个。十、contextsetup（道具，上下文）。context上下文环境，包括三部分：properties、slots、customevents。setup(props,context){const{attrs,slots,emit}=context}attrs是一个非响应式对象，主要接收no-props属性，常用于传递一些样式属性。slots是一个代理对象，其中slots.default()得到一个数组，数组的长度由组件的slot决定，slot的内容在数组内部。setup中不存在这个，所以用emit来代替之前的this.$emit，在child传递给parent的时候使用，触发自定义事件。11、watch新用法，监控数据变化，并进行相应的业务处理。在组合API中，监听器可以监听一个或多个属性，也可以是基本类型数据或引用数据类型。watch的特点：Lazy：运行时，不会立即执行。更具体：您需要添加监控属性。可以访问属性的前一个值：最新的值和修改前的值将在回调函数中返回。可配置：可添加配置项。配置项immediate：配置watch属性是否立即执行。当值为true时，一旦运行就会立即执行。当该值为false时，它??将保持惰性。deep：配置手表是否深度监控。当该值为真时，可以监视对象的所有属性。当该值为false时，将维护更具体的功能，并且必须将其分配给特定的属性。12.watchEffect是一个帧监听器和一个副作用函数。它会监听引用数据类型的所有属性，不需要特定于某个属性。一旦运行它会立即监听，当组件被卸载时它会停止监听。watchEffect特点：非惰性：一旦运行，立即执行。更抽象：使用时不需要指定谁在监听，直接在回调函数中使用即可。看懂比看难多了。不能访问上一个值：只能访问当前最新值，不能访问修改前的值。watch的前两个特性与watchEffect正好相反。watch可以通过配置项修改为具有watchEffect特性。十三、computed的新用法组合API中computed属性的用法也发生了变化，使用前需要先介绍一下。import{ref,computed}from"vue"exportdefault{setup(){letsum=computed(()=>{return....})}}也可以写成一个选项：letsum=computed({get:()=>{return....},set:(value)=>{return....}})14.provide/injectprovide传输数据或函数，inject接收数据或函数。project/inject类似于publish和subscribe，主要用于组件传值层级过深，或者兄弟组件无法传参的情况。这时候用project/inject就很方便了。//启动import{provide,readonly}from"vue"provide('info',readonly(info))//接收import{inject}from"vue"constinfo=inject('info')十五、生命周期钩子函数中新的组合API，setup替换了beforeCreated和created，所以这两个hook是无效的，其他的hook只需要在引入之前添加即可。import{onBeforeMount}from"vue"setup(){onBeforeMount(()=>{....})}其他钩子函数同上。16.获取真实DOM这里的ref与上面的ref不同，它是获取真实DOM节点的函数。使用时：GetRealDOM