2024年最全Vue 3中那些激动人心的新功能，最终入职阿里

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

mixins 的最大缺点是我们对它实际上添加到组件中的内容一无所知。这不仅让代码很难理解，而且还可能导致命名与已有的属性和函数发生冲突。

下面是作用域插槽。

{{ count }}

<button @click=“increment”>Increment

使用作用域插槽时，我们确切地知道可以通过v-slot属性访问哪些属性，因此代码更容易理解。这种方法的缺点是我们只能在模板中访问它，并且只能在Counter组件作用域中使用。

现在是时候使用合成 API 了：

function useCounter() {

const count = ref(0)

function increment () { count.value++ }

return {

count,

incrememt

}

}

export default {

setup () {

const { count, increment } = useCounter()

return {

count,

increment

}

}

}

是不是更优雅？我们不受模板和组件作用域的限制，并且确切地知道可以从 counter 访问哪些属性。此外，由于useCounter只是返回某些属性的函数，因此我们可以获得编辑器中代码自动完成的帮助。没有隐藏在幕后的魔法，因此编辑器可以帮助我们检查类型并给出建议。

使用第三方库也能变得更优雅。例如，如果我们要使用 Vuex，则可以显式使用useStore函数，而不用污染 Vue 原型（this.$store），这种方法也消除了 Vue 插件的幕后魔法。

const { commit, dispatch } = useStore()

如果你想了解有关合成 API 及其用例的更多信息，我强烈建议你阅读 Vue 团队写的这篇文档（见下方链接）。这份文档解释了新 API 背后的理念，并给出了最佳用例的建议。Vue 核心团队的 ThorstenLünborg 还提供了一个很棒的存储库，其中包含合成 API 的使用示例。

文档：https://vue-composition-api-rfc.netlify.com/

存储库：https://github.com/LinusBorg/composition-api-demos

全局挂载 / 配置 API 更改

在实例化和配置应用程序的方式方面，还有一项重大变化。现在我们是这样做的：

import Vue from ‘vue’

import App from ‘./App.vue’

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

Vue.use(/* … */)

Vue.mixin(/* … */)

Vue.component(/* … */)

Vue.directive(/* … */)

new Vue({

render: h => h(App)

}).$mount(‘#app’)

目前我们使用全局Vue对象来提供配置并创建新的 Vue 实例。对Vue对象所做的任何更改都会影响每个 Vue 实例和组件。

下面我们看看 Vue 3 中是怎么做的：

import { createApp } from ‘vue’

import App from ‘./App.vue’

const app = createApp(App)

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

app.use(/* … */)

app.mixin(/* … */)

app.component(/* … */)

app.directive(/* … */)

app.mount(‘#app’)

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

它可以让你的代码更容易理解，并且不容易出现由第三方插件引起的意外问题。当前，如果某些第三方解决方案正在修改 Vue 对象，则可能会以意想不到的方式（尤其是全局 mixins）影响你的应用程序，而 Vue 3 则不会出现这种情况。

这一 API 更改现在正在这个 RFC 中讨论，意味着将来它可能还会继续变动。

RFC：https://github.com/vuejs/rfcs/pull/29

片 段

Vue 3 中值得期待的另一个激动人心的新功能是片段（Fragments）。

你可能会问什么是片段？嗯，如果你创建一个 Vue 组件，则它只能有一个根节点。这意味着无法创建这样的组件：

Hello

World

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

事实证明，React 社区也有同样的问题。他们提出的解决方案是一个名为片段（Fragment）的虚拟元素。它看起来差不多是这个样子：

class Columns extends React.Component {

render() {

return (

<React.Fragment>

Hello World

</React.Fragment>

);

}

}

尽管片段看起来像是普通的 DOM 元素，但它是虚拟的，根本不会在 DOM 树中渲染。这样我们可以将组件功能绑定到单个元素中，而无需创建多余的 DOM 节点。

目前，你可以在 Vue 2 中使用 vue-fragments 库来应用片段，而在 Vue 3 中它是开箱即用的！

Suspense

React 生态系统中还有一个好主意也将在 Vue 3 中采用，就是 Suspense 组件。

Suspense 会暂停你的组件渲染，并渲染回退组件，直到满足一个条件为止。在 Vue London Evan 期间，Vue 团队简单介绍了这个主题，并向我们展示了值得期待的 API。到头来 Suspense 只是一个具有插槽的组件：

<template #fallback>

Loading…

在Suspended-component完全渲染之前将显示回退组件。Suspense 可以等待组件下载完毕（如果该组件是异步的），或者在setup函数中执行一些异步操作。

多个 v-model

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

从表单元素可以很好地了解v-model：

<input v-bind="property />

但是你知道可以对所有组件使用v-model吗？在后台，v-model只是传递value属性和侦听input事件的捷径。将上面的示例重写为以下语法会有完全相同的效果：

<input

v-bind:value=“property”

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

/>

我们甚至可以使用组件model属性更改默认属性和事件的名称：

model: {

prop: ‘checked’,

event: ‘change’

}

如你所见，如果我们希望在组件中进行双向绑定，则v-model指令可能是一个非常有用的语法糖。不幸的是，每个组件只能有一个v-model。

还好在 Vue 3 中不会有这个问题！你将能够给v-model赋予属性名称，并根据需要拥有尽可能多的v-model。下面这个示例中，你可以在一个表单组件中找到两个v-model：

<InviteeForm

v-model:name=“inviteeName”

v-model:email=“inviteeEmail”

/>

这一 API 更改现在正在这个 RFC 中讨论，这意味着将来可能会有新的变化。

RFC：https://github.com/vuejs/rfcs/pull/31

Portals

Portals 是特殊的组件，用来在当前组件之外渲染某些内容。这也是 React 原生实现的功能之一。React 文档关于 portals 是这样介绍的：

“Portals 提供了一种一流的方式来将子级渲染到父组件的 DOM 层级之外的 DOM 节点中。”

这是一种处理模态、弹出窗口以及页面顶部组件的非常好用的方法。通过 portals，你可以确保没有任何主机组件 CSS 规则会影响你要显示的组件，也无需使用z-index搞些小动作了。

对于每个 portal，我们需要指定其目标位置，在其中渲染 portal 内容。下面是 portal-vue 库的实现，它为 Vue 2 添加了这一功能：

portal-vue 库：https://github.com/LinusBorg/portal-vue

This slot content will be rendered wherever thportal-target with name 'destination'

is located.

Vue 3 将提供对 portals 的开箱即用支持！

新的自定义指令 API

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

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

const MyDirective = {

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

inserted() {},
读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）