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

本文主要是介绍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>