vue3使用心得 - 技术栈

初识vue3

Vue3于2020年9月18日正式发布，作为Vue框架的最新版本，Vue3带来了许多新的改进和特性，让开发者能够更加轻松地构建高性能、可维护、可扩展的Web应用程序。
Vue3的一个重要特性是它使用了悬挂模式（Suspense Mode）来帮助在组件之间轻松编写异步代码。这个特性使得加载、延迟执行和缓存组件更加容易，从而减少了开发人员在编写异步代码时所需的复杂性。
Vue.js 3（Vetur版本为3.0.0及以上）相对于Vue.js 2带来了一系列的改进和新特性。以下是Vue.js 3的一些主要特性：

Composition API:
- 引入了组合式 API，提供了更灵活、可组合性更强的方式来组织和重用组件逻辑。它允许你根据功能而不是选项来组织组件代码。
响应式系统优化:
- 采用了基于Proxy的响应式系统，相对于Vue.js 2的Object.defineProperty，提供了更高性能的响应式数据追踪。
Teleport:
- 引入了teleport，这是一种新的特性，使得你可以将组件的一部分渲染到DOM结构的不同位置。
Fragments:
- 支持了模板中的片段，无需额外的包裹元素。
Suspense:
- 引入了Suspense组件，使得异步组件加载和处理异常状态更加容易。
全局 API的变更:
- 全局的Vue实例在Vue 3中不再是单例，而是通过createApp函数来创建，这有助于更好地支持多实例的场景。
自定义渲染器 API: 详情
- 提供了一个官方的自定义渲染器 API，使得Vue可以更容易地适应不同平台和运行环境。
多根节点支持:
- 模板中可以有多个根节点，不再需要一个外围的包裹元素。
TypeScript 支持改进:
- 对TypeScript的支持得到了加强，包括更好的类型推断和更清晰的类型定义。
性能优化:
- 在多个方面进行了性能优化，包括渲染和打包大小。
Directive 的改进:
- 自定义指令的API进行了改进，使其更容易使用。
Slot API 的改进:
- 插槽的API也有所改进，支持了更多的用例。

这些特性使得Vue.js 3更加强大、灵活，并且在性能方面有所提升。请注意，使用Vue.js 3可能需要适应一些新的概念和API，但这些变化有助于提高开发体验和应对更多的应用场景。如果有需要，建议查阅官方文档以获取最新的信息。我对vue3的想法：

永不停止的更新迭代
学不完学不完根本学不完
新东西出来，难以走出不想学习它的心理预期
它强由它强，我用vue2照样一把梭

vue2与vue3的区别

Vue 2 将于 2023 年 12 月 31 日停止维护

组合式 API（Composition API）:
- Vue 2： 主要使用选项 API，将数据、计算属性、方法等组织在一个对象中。
- Vue 3： 引入了组合式 API，允许将组件逻辑按功能划分，提高代码的可维护性和可读性。
响应式系统:
- Vue 2： 使用 Object.defineProperty 实现响应式。
- Vue 3： 使用基于 Proxy 的响应式系统，提供更高性能和更灵活的响应式数据追踪。
Teleport（传送门）:
- Vue 2： 缺少内置的传送门功能。
- Vue 3： 引入了 teleport 特性，允许你将组件的一部分渲染到 DOM 结构的不同位置。
Fragments（片段）:
- Vue 2： 要求模板中有单一的根元素。
- Vue 3： 支持多个根节点，无需额外的包裹元素。
Suspense（悬挂）:
- Vue 2： 不支持悬挂。
- Vue 3： 引入了 Suspense 组件，用于处理异步组件加载和异常状态。
全局 API 的改变:
- Vue 2： 通过全局的 Vue 实例来创建应用。
- Vue 3： 使用 createApp 函数来创建应用，Vue 实例不再是全局的单例。
自定义渲染器 API:
- Vue 2： 缺少官方的自定义渲染器 API。
- Vue 3： 提供了更强大的自定义渲染器 API，使 Vue 更易于适应不同平台和运行环境。
TypeScript 支持改进:
- Vue 2： 需要额外的类型声明文件。
- Vue 3： 对 TypeScript 的支持得到了改进，具有更好的类型推断和清晰的类型定义。
性能优化:
- Vue 3： 在多个方面进行了性能优化，包括渲染性能和打包大小。
Directive 和 Slot API 的改进:
- Vue 3： 对自定义指令和插槽 API 进行了改进，提供更多的灵活性。

在项目中使用vue3

使用vite来构建项目为什么选用vite

快

源码：Vite 以原生 ESM 方式提供源码，这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

依赖：Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。对比如下图：

在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。

Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

**兼容性注意

Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本**。

快速创建vite项目

bash 复制代码

# npm 7+, extra double-dash is needed: 
npm create vite@latest my-vue-app -- --template vue 

# yarn 
yarn create vite my-vue-app --template vue 

# pnpm 
pnpm create vite my-vue-app --template vue

然后根据提示完成选配安装

接下来进入项目进行模块安装

bash 复制代码

cd my-vue-app
yarn
yarn run dev

至此，一个vue3+vite项目就已经搭建完成，如果需要其他插件，自行安装

vue3使用体会

ref与reactive的区别

在Vue 3中，ref 和 reactive 都用于创建响应式对象，但它们的使用方式和用途略有不同。

ref：
- 用途： 用于创建单一的响应式值或引用。
- 返回值： 返回一个普通的 JavaScript 对象，其中包含一个名为 value 的属性，该属性保存着响应式值。
- 示例：
  csharp 复制代码
```
javascriptCopy code
import { ref } from 'vue';

const count = ref(0);

// 访问值
console.log(count.value); // 0

// 更新值
count.value += 1;
```

reactive：

用途： 用于创建具有多个属性的响应式对象。
返回值： 返回原始对象的响应式代理。

示例：

javascript 复制代码

javascriptCopy code
import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: '你好',
});

// 访问属性
console.log(state.count); // 0
console.log(state.message); // '你好'

// 更新属性
state.count += 1;
state.message = 'Vue 3 很棒!';

主要区别：

单一值 vs. 对象：
- ref 用于创建对单一值的响应式引用。
- reactive 用于创建具有多个属性的响应式对象。
访问值的方式：
- 在 ref 中，通过 .value 属性访问值（例如 count.value）。
- 在 reactive 中，直接访问属性（例如 state.count）。
不可变性：
- ref 通常用于可变的值。
- reactive 通常用于创建具有多个属性的响应式状态对象。
使用场景：
- 使用 ref 当您需要一个简单的响应式引用，例如用于原始值或单一状态。
- 使用 reactive 当您需要一个具有多个属性的响应式对象，例如组件的状态对象。
对象 vs. 引用：
- ref 返回一个普通的 JavaScript 对象，其中包含一个 value 属性。
- reactive 返回原始对象的响应式代理。

在实际应用中，您可能会对简单值（如数字或布尔值）使用 ref，而对于具有多个属性的较复杂状态对象，您可能会使用 reactive。 ref声明的对象可以直接赋值，如count.value = 1，而reactive声明的对象，只能单个赋值，如:

js 复制代码

state.count = 1
state.status = 'done'

setup的使用

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

更少的样板内容，更简洁的代码。
能够使用纯 TypeScript 声明 props 和自定义事件。
更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

位置，setup位置有如下两种

js 复制代码

// 在script标签上
// 所有变量、属性或导入的模块可直接在模板中使用，无需单独return
<script setup>
</script>

js 复制代码

// 在代码内
// 在模版中用到的组件，需要在代码中注册才可使用，属性、变量同样如此，使用相对繁琐，手感不丝滑
<script>
import xxx from './components/xx.vue'
export default {
components: {
xxx
},
setup(){
  const count = ref(0)
  return {
    count
  }
}
}
</script>

异步如果setup声明在<script setup>标签上，内部存在异步调用，默认在顶层加上async关键字；如果在代码内部声明setup，则需要手动加入async setup()

自定义v-model

js 复制代码

<CustomInput :model-value="searchText" @update:model-value="newValue => searchText = newValue" />

js 复制代码

<!-- CustomInput.vue --> 
<script setup> 
const props = defineProps(['modelValue']) 
const emits = defineEmits(['update:modelValue']) 
</script>
<template> 
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template>

以上是一个自定义v-model的实现过程，可以做如下修改，在子组件实现过程中，利用computed的可读可写特性：

js 复制代码

const localValue = computed({
get(){
return props.modelValue 
},
set(v) {
emits('update:modelValue', v)
}
})

<template> 
<input v-model="localValue" /> </template>

更多的需要在实践中得到，本文权当自己在vue3学习过程中的一点点小收货。