Vue3学习

Vue 3 是 Vue.js 的重大升级，带来了许多新功能和性能改进。以下是 Vue 3 的详解，包括语法和与 Vue 2 的主要差异。

主要特性和变化

1. 组合式 API (Composition API):

   • Vue 2 使用选项式 API（Options API），通过 data, methods, computed, watch 等选项来组织代码。
   • Vue 3 引入了组合式 API，通过 setup 函数来更好地组织和复用代码，尤其适合处理复杂组件逻辑。

2. 性能改进:

   • Vue 3 使用 Proxy 代替 Vue 2 中的 Object.defineProperty，提高了响应式系统的性能。
   • 编译器优化和更小的打包体积。

3. 新组件:

   • Teleport：允许在 DOM 结构的其他位置渲染组件的内容。
   • Suspense：处理异步组件加载和状态的方式更优雅。

4. Fragments:

   • Vue 3 支持组件返回多个根节点，这在 Vue 2 中是不允许的。

5. 更好的 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 机制。

1. 快速冷启动：Vite只启动一台静态页面的服务器，不会打包全部项目文件代码，服务器根据客户端的请求加载不同的模块处理，实现按需加载，而我们所熟知的webpack则是，一开始就将整个项目都打包一遍，再开启dev-server，如果项目规模庞大，打包时间必然很长。

2. 打包编译速度：当需要打包到⽣产环境时，vite使⽤传统的rollup进⾏打包，所以，vite的优势是体现在开发阶段，另外，由于vite使⽤的是ES Module，所以代码中不可以使⽤CommonJs；

3. 热模块更新：在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进阶技能树

组件间通信

Vue3组件通信-vue3基础（JS）-CSDNVue进阶技能树