web前端：Vue3中的大热门——其他技术

作者:凃老师更新于： 2020-04-07 22:11:20

　　API就是操作系统留给应用程序的一个调用接口，应用程序通过调用操作系统的API而使操作系统去执行应用程序的命令。API与图形用户接口(GUI)或命令接口有着鲜明的差别:API接口属于一种操作系统或程序接口，而后两者都属于直接用户接口。

　　全局安装/配置API更改

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

　　importVuefrom'vue'

　　importAppfrom'./app.vue'

　　Vue.config.ignoredElements=[/^app-/]

　　Vue.use(/*...*/)

　　Vue.mixin(/*...*/)

　　Vue.component(/*...*/)

　　Vue.directive(/*...*/)

　　newVue({

　　render:h=>h(App)

　　}).$mount('#app')

　　现在，让我们看看它如何在Vue3中运行：

　　import{createApp}from'vue'

　　importAppfrom'./App.vue'

　　constapp=createApp(App)

　　app.config.ignoredElements=[/^app-/]

　　app.use(/*...*/)

　　app.mixin(/*...*/)

　　app.component(/*...*/)

　　app.directive(/*...*/)

　　app.mount('#app')

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

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

　　Fragment

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

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

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

　　当前，Vue2中可以使用vue-fragments库，而在Vue3中，您可以立即使用它！

　　vue-fragments参考写法

　　Suspense

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

　　Loading...

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

　　多个v-model

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

　　看看v-model：

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

　　v-bind:value="property"

　　v-on:input="property=$event.target.value"

　　/>

　　假如我们希望用v-model同样给该元素添加change事件、变更checked值进行绑定的话。

　　不幸的是，v-model每个组件只能有一个组件。

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

　　v-model:name="username"

　　v-model:email="email"

　　/>

　　Portals

　　Portals是特殊的组件，用于在当前组件之外呈现某些内容。

　　如果父组件有overflow:hidden或z-index样式，子组件作为模态框、弹出窗口以及通常显示在页面顶部的组件的时候，可能会因为z-index不足，被其他元素覆盖，有了Portals就可以放心了！

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

此插槽内容将呈现在name为“destination”的portal-target所在的任何位置。

　　Vue3将附加对portals的开箱即用支持！

　　新的自定义指令API

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

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

　　constMyDirective={

　　bind(el,binding,vnode,prevVnode){},

　　inserted(){},

　　update(){},

　　componentUpdated(){},

　　unbind(){}

　　}

　　……这就是Vue3中的样子。

　　constMyDirective={

　　beforeMount(el,binding,vnode,prevVnode){},

　　mounted(){},

　　beforeUpdate(){},

　　updated(){},

　　beforeUnmount(){},//new

　　unmounted(){}

　　}

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

　　应用程序接口是一组定义、程序及协议的集合，通过API接口实现计算机软件之间的相互通信。API的一个主要功能是提供通用功能集。程序员通过调用API函数对应用程序进行开发，可以减轻编程任务。API同时也是一种中间件，为各种不同平台提供数据共享。