- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章Vue3 高阶 API 大汇总,强到离谱由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
高阶函数是什么呢?
高阶函数英文名叫:Higher Order function ,一个函数可以接收一个或多个函数作为输入,或者输出一个函数,至少满足上述条件之一的函数,叫做高阶函数.
本篇内容的知识点比较多,讲得不够细致,不熟悉的可翻阅前几篇文章,分别对每个知识点都有一篇特别详细的文章。建议读者收藏.
mixin 混入,提供了一种非常灵活的方式,来分发 vue 组件中的可复用功能,一个mixin 对象可以包含任意组件选项,当组件使用 mixin 对象时,所有的 mixin 对象的选项将被混入组件本身的选项.
mixins 是一个数组,一个组件可以引入多个 mixin 对象。使用方法如:
mixin 使用主要针对选项式API,在vue3中使用相对少。使用时注意事项:
mixin也可以自定义属性,如果与实例中的属性冲突时,可以使用 optionMergeStrategies 选项合并策略,自定义合并规则.
自定义指令分为全局和局部自定义指令.
全局自定义指令 。
在 vue3 中,vue 实例通过createApp 创建,所以全局自定义指令的挂载方式也改变了, directive 被挂载到 app上.
局部自定义指令 。
自定义指令 v-xxx 直接使用就好,对应上述示例自定义指令为 v-focus.
每个钩子里面的参数含义
mounted(el,binding,vnode){…} 。
el:代表当前使用该指令的元素 。
binding:指令传来的值 。
vnode:当前元素节点相关 。
一个指令定义对象可以提供如下几个钩子函数(都是可选的,根据需要引入) 。
自定义指令的也可以带参数,参数可以是动态的,参数可以根据组件实例数据进行实时更新.
使用方法如下:
teleport 传送门组件,提供一种简洁的方式,可以指定它里面的内容的父元素。通俗易懂地讲,就是 teleport 中的内容允许我们控制在任意的 DOM 中,使用简单.
使用语法:
to 属性是指定 teleport 中的内容加入的 DOM 元素。可以是标签名,也可以是 id 或类名.
使用 vue 开发时,都是在多个组件之间不断地嵌套,处理元素的样式或者层级的时候就会变得困难。如我们需要添加一个 modal 模态框或 toast 提示框,如果我们把这样的框可以从 vue 组件中剥离出来,我们样式和层级设置起来会更加简便.
有些同学会想,这直接放到 index.html 中不就好了吗?另外 modal 、toast 元素需要使用 vue 组件的状态值,通过状态控制 modal、toast 的隐藏显示。如果直接放入 index.html 则状态控制就复杂了.
所以 teleport 传送门组件就派上用场了。有点像“哆啦A梦”的任意门,可以把元素传送到任意的元素内。同时还可以使用 vue 组件内的状态值控制它.
setup 用来写组合式 api,从生命周期钩子函数角度分析,相当于取代了 beforeCreate 。会在 creted 之前执行。内部的属性和方法,必须 return 暴露出来,将属性挂载到实例上,否则没有办法使用。setup内部没有 this ,所以不能挂载 this 相关的东西,它可以接收两个参数:props 和 context .
setup 特性:
1、这个函数会在 created 之前执行,上述已解释.
2、setup 内部没有 this,不能挂载 this 相关的东西.
3、setup 内部的属性和方法,必须 return 暴露出来,否则没有办法使用.
4、setup 内部数据不是响应式的.
5、setup不能调用生命周期相关函数,但生命周期函数可以调用setup内的函数.
ref 主要作用是使基础类的数据具备响应式能力,使用之前必须引入。在 Composition API中数据不具备响应式,修改数据时视图不会改变,所以在创建数据时,使用ref包裹一下,让数据具备响应式.
ref 使用:
让引用类型的数据具备响应式.
与上述的 ref 原理和用法都一致.
让数据只读,不能修改数据.
父子组件之间传值时,Vue 是单向数据流,为了防止子组件修改数据,所以使用 readonly 包裹数据,保证只能在源数据上修改.
toRefs 用来解构 ref、reactive 包裹的响应式数据.
使用:
父子组件之间进行传值时,有些参数是可选参数,toRefs 解构参数不存在时就会报错,使用 toRef 解决该问题.
使用:
解构时先检查 obj 对象是否存在 love 属性,如果存在就继承obj对象中的属性值,如果不存在就会创建一个.
setup(props,context).
context 上下文环境,其中包括了属性、插槽、自定义事件三部分.
attrs 是一个非响应式的对象,主要接收 no-props 属性,经常用来传递一些样式属性.
slots 是一个 proxy 对象,其中 slots.default() 获取到的是一个数组,数组长度由组件的插槽决定,数组内是插槽内容.
setup 内不存在this,所以 emit 用来替换 之前 this.$emit 的,用于子传父时,自定义事件触发.
监听数据变化,做出相应的业务处理。在组合式api中,侦听器可以监听一个或多个属性,也可以是基础类型数据或引用数据类型.
watch 的特点:
是一个帧听器,也是一个副作用函数。它会监听引用数据类型的所有属性,不需要具体到某个属性,一旦运行就会立即监听,组件卸载的时候会停止监听.
watchEffect 特点:
watch 的前两个特点与 watchEffect 的两个特点刚好相反,watch 通过配置项可以修改成带有 watchEffect 特点 。
在组合式api中计算属性用法也发生了改变,使用之前需要引入.
也可以是选项式写法:
provide发射数据或函数,inject 接收数据或函数.
project / inject 类似与发布订阅,主要用在组件传值层级太深,或兄弟组件没法传参,此时使用 project / inject 特别方便.
组合式api中,setup代替了beforeCreated和created,所以这两个钩子失效,其他的只需要引入时前面加on即可.
其他的钩子函数与上相同.
此处的 ref 与上边的 ref 不同,是获取真实DOM节点的函数.
使用时:
使用的时候记得在return,然后再 mounted 的时候去获取内容就可以了.
原文链接:https://www.toutiao.com/a7032075595513217572/ 。
最后此篇关于Vue3 高阶 API 大汇总,强到离谱的文章就讲到这里了,如果你想了解更多关于Vue3 高阶 API 大汇总,强到离谱的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我正在使用缺少 findall 的高阶 Prolog 变体. 还有一个关于实现我们自己的问题 findall这里:Getting list of solutions in Prolog . 低效的实现
我正在尝试使用 Flow 类型创建高阶组件,但在处理返回的组件类型时遇到了问题。 最小的例子: /* @flow */ import React from 'react'; type Props =
我想抽象化传递到我的数组的 reduce() 函数中的函数,使该函数成为通用的“最强大的 Array reducer”。为此,我想在 reduce() 参数中传入不同的特定函数,以便能够指定比较标准。
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 7 年前。
将宏名称作为其他宏的参数来模拟高阶函数是否“安全”? 即我应该注意哪里才不会搬起石头砸自己的脚? 以下是一些片段: #define foreach_even(ii, instr) for(int ii
谁能给我解释一下下面的代码是怎么回事。该函数正在接收 n 作为参数,那么 m 来自哪里?整个代码令人困惑。如果有人可以解释一下? function greaterThan(n) { retur
我有一个 list ,例如: ["Hello", "Goodbye"] 我想使用 map在名单上; 我已经成功使用 map前: f = ("example" ++) 那么: map f ["Hello
我正在尝试通过在线书籍“Learn you a Haskell”来学习一些 Haskell,并且我有一个关于高阶函数的问题。 我看到了some examples我想做一些更高级的功能,但我不知道为什么
我正在学习更深入的 redux,并且在处理高阶 reducer 时遇到一些麻烦。 我试图使用一个简单的分页示例来了解它是如何工作的。 NB:下面的代码只是 Nodejs 上下文中 redux 的一个快
高阶函数是什么呢? 高阶函数英文名叫:Higher Order function ,一个函数可以接收一个或多个函数作为输入,或者输出一个函数,至少满足上述条件之一的函数,叫做高阶函数。 前言
我写了一个小的 R 代码片段来遍历包含马尔可夫链实现的向量,并返回观察到的给定顺序的转换。具体而言,假设我们对状态空间 $\mathcal{S}$ 的 2 次转换感兴趣。最终目标是以方便的形式存储计数
如您所见,我很难表达标题中的问题。 我有一个包含 li 的 ul,它本身包含一个 ul 和它自己的 li。 我希望仅第一个 li 元素而不是第二个 ul 中的元素。 如果你看this fiddle (
我是一名优秀的程序员,十分优秀!