Vue3.5 新特性有哪些?

更新日期: 2024-10-11阅读: 1.8k标签: vue3

前言

2024年9月3日,vue 官方团队发布了 Vue.js 3.5 稳定版,这个小版本不包含任何破坏性变更,为服务器端渲染(SSR)带来了一些期待已久的改进,同时包括了内部改进和实用的新功能。让我们一起来探索这些有趣的变化。


响应式系统优化

在 3.5 中,Vue 的响应式系统经历了又一次重大重构,实现了更好的性能和显著减少了内存占用(-56%),且没有行为变化。这次重构还解决了 SSR 过程中由于悬挂的计算属性导致的过时计算值和内存问题。

此外,3.5 还优化了对大型、深度响应式数组的响应式追踪,在某些情况下使此类操作的速度提高了多达 10 倍。


响应式 Props 解构

响应式 Props 解构在 3.5 中已经稳定。该功能现在默认启用,在 <script setup> 中从 defineProps 调用解构的变量现在是响应式的。值得注意的是,这个功能通过利用 JavaScript 的原生默认值语法,大大简化了声明带有默认值的 props。

在 Vue 3.5 之前,你需要使用 toRef() 来响应式地解构 Props:

// 使用 toRef() 解构 props
const props = defineProps<{
  count: number
}>()

// 响应式解构 count 属性
const count = toRef(props, 'count')

const log = () => {
  console.log(count.value)
}

在 Vue 3.5 中,你可以直接进行响应式解构:

// Vue 3.5 支持直接响应式解构
const { count } = defineProps<{
  count: number
}>()

const log = () => {
  console.log(count)
}


Lazy Hydration 懒加载水合

异步组件现在可以通过 defineAsyncComponent() api 的 hydrate 选项来控制何时进行水合。例如,只在组件变为可见时才进行水合:

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const AsyncComp = defineAsyncComponent({
loader: () => import('./Comp.vue'),
hydrate: hydrateOnVisible()
})

核心 API 故意设计得比较底层,Nuxt 团队已经在这个功能之上构建了更高级的语法糖。


Props默认值

在 Vue 3.5 之前,Props 默认值的写法如下:

// 使用 TypeScript 泛型(编译时)
const props = withDefaults(
  defineProps<{
    count: number
  }>(),
  {
    count: 0
  }
)

// 使用 JavaScript(运行时)
const props = defineProps({
  count: {
    type: Number,
    default: 2
  }
})

在 Vue 3.5 中,默认 Props 值可以使用以下方式:

// TypeScript
const { count = 1 } = defineProps<{
  count: number
}>()

// JavaScript
const { count = 2 } = defineProps({
  count: Number
})


使用 useTemplateRef() 获取模板引用

在 Vue 3 中,你可以使用 ref 来获取模板引用,以访问 dom 和子组件,但 ref 可能令人困惑。例如,一个 ref 变量是响应式数据还是 DOM 元素?Vue 3.5 引入了 useTemplateRef,完美地解决了这些问题。

<template>
  <div class="list" ref="listEl">
    <div ref="itemEl" class="item" v-for="item in list" :key="item">
      {{ item }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTemplateRef, onMounted } from 'vue'

const list = [1, 2, 3]

const listRef = useTemplateRef('listEl')
const itemRef = useTemplateRef('itemEl')

onMounted(() => {
  console.log(listRef.value)  // div.list
  console.log(itemRef.value)  // Proxy(Array) {0: div.item, 1: div.item, 2: div.item}
})
</script>

当一个模板绑定的 ref 拥有多个相同名称的元素时,useTemplateRef() 会返回一个数组,例如使用 v-for 渲染的列表。


Teleport 组件改进

<Teleport> 组件有一个已知的限制,即其目标元素必须在组件挂载时存在。在 Vue 3.5 中,<Teleport> 引入了一个 defer 属性,允许在当前渲染周期结束后挂载:

<Teleport defer to="#cont">
  <div v-if="open">
    <span>挂载到 id 为 'cont' 的 div 上</span>
    <button @click="open = false">关闭</button>
  </div>
</Teleport>
<!-- Teleport 内容的容器 -->
<div id="cont"></div>
<button @click="open = true">打开</button>

由于 <div id="cont"></div> 在 Teleport 之后渲染,因此需要 defer 属性。如果 <div id="cont"></div> 在 Teleport 之前渲染,则不需要 defer。


使用useId() 生成唯一的应用 ID

useId() 用于为每个应用程序生成唯一的 ID,确保在服务器端和客户端渲染之间保持稳定性。它可以用于生成表单元素和可访问性属性的 ID,而不会在 SSR 应用程序中造成 ID 冲突:

<script setup lang="ts">
import { useId } from 'vue'

const id = useId()
</script>

<template>
  <form>
    <label :for="id">姓名:</label>
    <input :id="id" type="text" />
  </form>
</template>

useId() 平时工作中不常用。但是需要注意的是:useId() 只会对一个 createApp 的实例生成一个唯一的 id,而如果存在多个 createApp ,那么每一个 createaApp 的实例中的 id 其实都是相同的,所以这时候我们可以选择自定义一个唯一的前缀+ id,进行二次 id 的单一化。

vue3.5文档:https://blog.vuejs.org/posts/vue-3-5

链接: https://fly63.com/article/detial/12715

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!