Vue 3.5 的一些主要特性及其代码示例

Vue 3.5 的一些主要特性及其代码示例，依照vue官网整理。更多详细内容，请参考 Vue 官方文档。

1. Script Setup 语法

<script setup> 是一种编写组合式 API（Composition API）的简洁语法，它允许你在单文件组件中直接声明响应式状态和计算属性，而不需要显式地返回它们。

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'

// 创建一个响应式引用
const message = ref('Hello Vue 3.5!')
</script>

2. 新的 Transition Group

Vue 3.5 对 <transition-group> 组件进行了改进，使动画效果更加自然和流畅。

<template>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </transition-group>
</template>

<script setup>
import { ref } from 'vue'

// 创建一个响应式数组
const items = ref([
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' }
])
</script>

<style scoped>
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

3. 全局 API 的改进

Vue 3.5 对全局 API 进行了一些调整，使其更符合直觉和易于使用。

import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue'
import FocusDirective from './directives/FocusDirective'
import MyPlugin from './plugins/MyPlugin'

// 创建应用实例并注册全局组件、指令和插件
createApp(App)
  .component('MyComponent', MyComponent)
  .directive('focus', FocusDirective)
  .use(MyPlugin)
  .mount('#app')

4. Composition API 的改进

Vue 3.5 中的 Composition API 变得更加完善，增加了更多的功能。

<template>
  <div>{{ fullName }}</div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 创建响应式引用
const firstName = ref('John')
const lastName = ref('Doe')

// 创建计算属性
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
</script>

5. Teleport 组件

Teleport 组件允许你将内容渲染到 DOM 的其他位置。

<template>
  <teleport to="#modal">
    <div class="modal">I'm a modal</div>
  </teleport>
</template>

<script setup>
</script>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1em;
}
</style>

6. 响应式系统的优化

Vue 3.5 对响应式系统进行了优化，提高了性能和可用性。

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

<script setup>
import { ref } from 'vue'

// 创建一个响应式引用
const count = ref(0)

// 定义一个方法来增加计数器
function increment() {
  count.value++
}
</script>

7. 自定义指令

Vue 3.5 增加了对自定义指令的改进，使其更易于定义和使用。

<template>
  <input v-focus />
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 定义一个自定义指令
const focusDirective = {
  mounted(el) {
    el.focus()
  }
}

// 创建应用实例并注册自定义指令
const app = createApp({})
app.directive('focus', focusDirective)
</script>

8. Suspense 组件

Vue 3.5 引入了 <Suspense> 组件，用于处理异步组件渲染，使得加载状态的处理更加优雅。

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

// 定义一个异步组件
const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)
</script>

9. Emits 选项

Vue 3.5 引入了 emits 选项，用于显式声明组件发出的事件。

<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
import { defineEmits } from 'vue'

// 声明组件发出的事件
const emit = defineEmits(['customEvent'])

// 定义一个方法来触发事件
function handleClick() {
  emit('customEvent', 'Hello from child!')
}
</script>

10. WatchEffect

Vue 3.5 引入了 watchEffect，它提供了一种简洁的方法来响应式地执行副作用。

<template>
  <div>{{ count }}</div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'

// 创建一个响应式引用
const count = ref(0)

// 使用 watchEffect 来监视响应式状态的变化
watchEffect(() => {
  console.log(`Count is: ${count.value}`)
})

// 每秒增加一次计数器
setInterval(() => {
  count.value++
}, 1000)
</script>

11. Fragment 支持

Vue 3.5 中，组件可以返回多个根元素，而不需要使用单一的根节点。

<template>
  <>
    <header>Header Content</header>
    <main>Main Content</main>
    <footer>Footer Content</footer>
  </>
</template>

<script setup>
</script>

12. 更好的 TS 支持

Vue 3.5 增强了对 TypeScript 的支持，使得类型推断和类型检查更加友好。

<template>
  <div>{{ message }}</div>
</template>

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

// 创建一个带有类型注解的响应式引用
const message = ref<string>('Hello Vue 3.5 with TypeScript!')
</script>

13. Devtools 支持

Vue 3.5 改进了与 Vue Devtools 的集成，使得调试和性能分析更加方便。你可以在开发过程中利用 Vue Devtools 来更好地查看和调试你的 Vue 应用。

14. 新的生命周期钩子

Vue 3.5 增加了一些新的生命周期钩子，如 onRenderTracked 和 onRenderTriggered，用于跟踪和调试渲染过程。

<template>
  <div>{{ count }}</div>
</template>

<script setup>
import { ref, onRenderTracked, onRenderTriggered } from 'vue'

// 创建一个响应式引用
const count = ref(0)

// 使用 onRenderTracked 来跟踪渲染依赖
onRenderTracked((e) => {
  console.log('Render tracked:', e)
})

// 使用 onRenderTriggered 来跟踪渲染触发
onRenderTriggered((e) => {
  console.log('Render triggered:', e)
})

// 每秒增加一次计数器
setInterval(() => {
  count.value++
}, 1000)
</script>