首页
学习
活动
专区
工具
TVP
发布

Vue3中的大热门——其他技术

全局安装/配置API更改

在Vue2.x中对全局属性和全局API函数是这么玩的

现在,让我们看看它如何在Vue 3中运行:

您可能已经注意到,每个配置都限于使用定义的某个Vue应用程序createApp。

它可以使您的代码更易于理解,并且不易出现由第三方插件引起的意外问题。当前,如果某些第三方解决方案正在修改Vue对象,则可能会以意想不到的方式(尤其是全局混合)影响您的应用程序,而Vue 3则无需担心。

Fragment

如果您创建一个Vue组件,则它只能有一个根节点。

这意味着无法创建这样的组件:

原因是代表任何Vue组件的Vue实例都需要绑定到单个DOM元素中。创建具有多个DOM节点的组件的唯一方法是通过创建不具有基础Vue实例的功能组件。

当前,Vue 2中可以使用vue-fragments库,而在Vue 3中,您可以立即使用它!vue-fragments参考写法

Suspense

其可以帮助我们更简易的使用异步请求及处理Loading组件的展示

Suspense可以挂起Loading内容将一直显示到Suspended-component完全渲染为止。挂起可以等待,直到该组件被下载(如果这是一个异步组件),或者在setup功能上执行一些异步操作。

多个v-model

V模型是一种指令,可用于在给定组件上实现双向绑定。我们可以传递反应性属性并从组件内部对其进行修改。

看看v-model:

将以上示例重写为以下语法将具有完全相同的效果:

假如我们希望用v-model同样给该元素添加 change事件、变更checked值进行绑定的话。不幸的是,v-model每个组件只能有一个组件。

在Vue 3中这不会成为问题!您将能够提供v-model属性名称,并根据需要拥有任意数量的属性。在下面,您可以v-model在表单组件中找到两个的示例:

Portals

Portals是特殊的组件,用于在当前组件之外呈现某些内容。如果父组件有overflow: hidden 或 z-index 样式,子组件作为模态框、弹出窗口以及通常显示在页面顶部的组件的时候,可能会因为z-index不足,被其他元素覆盖,有了Portals就可以放心了!

对于每个Portals,我们需要指定它的目标目标,在其中将呈现Portals内容。在下面,您可以看到portal-vue库的实现,Vue 2中可以这么用:

Vue 3将附加对portals的开箱即用支持!

新的自定义指令API

自定义指令API在Vue 3中将略有变化,以更好地与组件生命周期保持一致。这项更改将使API更加直观,从而使新手更容易理解和学习API。

这是当前的自定义指令API:

……这就是Vue 3中的样子。

即使这是一项重大更改,也应该使用Vue兼容性构建轻松涵盖。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200325A0D94700?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券