Vue 3 是 Vue.js 的重大升级，带来了许多新功能和性能改进。以下是 Vue 3 的详解，包括语法和与 Vue 2 的主要差异。
主要特性和变化
组合式 API (Composition API):
- Vue 2 使用选项式 API（Options API），通过
data,methods,computed,watch等选项来组织代码。- Vue 3 引入了组合式 API，通过
setup函数来更好地组织和复用代码，尤其适合处理复杂组件逻辑。性能改进:
- Vue 3 使用 Proxy 代替 Vue 2 中的
Object.defineProperty，提高了响应式系统的性能。- 编译器优化和更小的打包体积。
新组件:
Teleport：允许在 DOM 结构的其他位置渲染组件的内容。Suspense：处理异步组件加载和状态的方式更优雅。Fragments:
- Vue 3 支持组件返回多个根节点，这在 Vue 2 中是不允许的。
更好的 TypeScript 支持:
- Vue 3 更好地支持 TypeScript，提供了更好的类型推断和类型检查。
Vue2&Vue3代码
// Vue 2 的组件
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
},
template: `
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
`
}
// Vue 3 的组件
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
const increment = () => {
count.value++
}
return { count, increment }
},
template: `
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
`
}
组合式API
组合式 API 允许在一个函数中组合和复用代码逻辑
import { ref, onMounted } from 'vue'
export default {
setup() {
const count = ref(0)
const increment = () => {
count.value++
}
onMounted(() => {
console.log('Component mounted')
})
return { count, increment }
}
}
创建和挂载 Vue 3 应用
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Vue 3 中的 Teleport 示例
Teleport允许你将组件的内容渲染到 DOM 的其他位置。
<template>
<div>
<teleport to="body">
<div class="modal">This is a modal</div>
</teleport>
</div>
</template>
Vue 3 中的 Suspense 示例
Suspense组件可以用来处理异步组件的加载状态。
<template>
<suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</suspense>
</template>
<script>
export default {
components: {
AsyncComponent: defineAsyncComponent(() => import('./AsyncComponent.vue'))
}
}
</script>
更好的 TypeScript 支持
Vue 3 中，通过组合式 API 和新的类型定义，TypeScript 支持得到了显著提升。以下是一个简单的示例：
import { ref, defineComponent } from 'vue'
export default defineComponent({
setup() {
const message = ref<string>('Hello, TypeScript with Vue 3!')
return { message }
}
})
响应式系统改进
Vue 3 使用 Proxy 代替了 Vue 2 中的 Object.defineProperty，这使得响应式系统更加灵活和高效。以下是一个简单的示例：
import { reactive } from 'vue'
const state = reactive({
count: 0,
nested: {
message: 'Hello'
}
})
state.count++ // 响应式更新
state.nested.message = 'Hi' // 深层次响应式更新
Vue3现状
构建工具-Vite
Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。Why Vite
我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁,然而，当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长 。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器 ，即使使用模块热替换（HMR） ，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。
优缺点
Vite 的快，主要体现在两个方面: 快速的冷启动和快速的热更新。而 Vite 之所以能有如此优秀的表现，完全归功于 Vite 借助了浏览器对 ESM 规范的支持，采取了与 Webpack 完全不同的 unbundle 机制。
快速冷启动：Vite只启动一台静态页面的服务器，不会打包全部项目文件代码，服务器根据客户端的请求加载不同的模块处理，实现按需加载，而我们所熟知的webpack则是，一开始就将整个项目都打包一遍，再开启dev-server，如果项目规模庞大，打包时间必然很长。
打包编译速度：当需要打包到⽣产环境时，vite使⽤传统的rollup进⾏打包，所以，vite的优势是体现在开发阶段，另外，由于vite使⽤的是ES Module，所以代码中不可以使⽤CommonJs；
热模块更新：在HRM热更新⽅⾯，当某个模块内容改变时，让浏览器去重新请求该模块即可，⽽不是像webpack重新将该模块的所有依赖重新编译；
常见函数
setup()
setup函数-vue3基础（JS）-CSDNVue进阶技能树
reactive()|ref()
reactive函数、ref函数-vue3基础（JS）-CSDNVue进阶技能树
computed()|watch()
computed函数、watch函数-vue3基础（JS）-CSDNVue进阶技能树
生命周期
Vue3的生命周期函数-vue3基础（JS）-CSDNVue进阶技能树
获取DOM并操作
Vue3获取DOM、操作组件-vue3基础（JS）-CSDNVue进阶技能树