我尝试从 React.js 切换到 Vue.js-js教程-PHP中文网

首页

web前端

js教程

我尝试从 React.js 切换到 Vue.js

DDD

Nov 05, 2024 am 02:03 AM

介绍

几年前，像许多其他人一样，我对 React.js 前端库的钩子和功能组件的到来感到“兴奋”。他们提供了一种全新的开发方式，编写的代码比使用 Components 类少得多。我真的被迷住了，并且迷上了很长一段时间。

今天我不得不选择 Vue.js 框架来满足一个全新的客户端项目的需求。在这个项目结束时，我对自己说，这是为您作为这个框架的新用户提供反馈的机会！

那么，这种技能的提升是否符合 Vue.js 的恶名？
如今，使用 Vue 开发前端比使用 React 更好吗？

这就是我们将要看到的！

项目启动

锅炉板

谁说开始一个项目，就说寻找一个好的样板来节省我们数小时，甚至数天的辛苦配置！
不需要看得太远，npm create vue@latest 命令很大程度上满足了我的需求：

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

登录后复制

已经支持 Typescript 语言，提供路由系统和商店，甚至还有单元和端到端测试的空间！

默认情况下，Vite 捆绑程序已安装。这不是让我不高兴吗！？事实上，构建速度很快，而且大多数时候，热模块替换 (HMR) 效果很好。

一点 npm run dev 来启动本地开发服务器，然后！它已经在浏览器中运行了！

用于生产？只需输入 npm run build 命令，检查输入后，项目将作为静态文件导出到 dist 目录中（在已激活 Typescript 的情况下）：

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

登录后复制

项目架构

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

登录后复制

在项目的建筑方面，我们特别发现：

index.html 文件，带有标签
;我们的整个 Vue 应用程序都嫁接在其上；
main.ts，依次创建App组件、router和store：

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

登录后复制

纯.ts文件，用于管理路由和存储；
一些配置和测试文件；
...当然还有 *.vue 文件，分为组件（对应于通用和可重用元素）和视图（对应于高级元素）页）

简而言之，文件架构相当简单，并且与 React 相对相似，即使在样板文件中检查了很多选项。
到目前为止，React 还没有什么真正新鲜的东西。这时就会出现显着差异！

Vue 文件的架构

这是受官方网站启发的代码片段。它只是在单击时更改文本的颜色，并在适用的情况下显示短语“上面的文本是绿色的”，但它代表了 *.vue 文件的典型架构：

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

登录后复制

注意事件与@click的绑定，条件显示与v-if，以及CSS中与v-bind()的绑定。

代码分为 3 个截然不同的部分：

脚本：控制代码；
模板：HTML结构；
style：CSS 样式表。

这三个部分永远不会混合？.
这有几个优点，这是我在客户项目的经验中亲身体验到的：

HTML 结构清晰、固定，并且具有非常声明式风格 - 一切都在那里，甚至是有条件显示的标签；
逻辑部分与显示部分分离良好；
可以就地编写纯CSS，直接链接到组件，无需安装第三方库；
尽管样式分离，您仍然可以在 CSS 中插入变量。

使用

小缺点：先验没有自动 CSS 填充。因此，你应该瞄准像 vue-emotion 这样的书店。

从我的角度来看，我发现这种“all-in-JS”库有点破坏了 Vue 提供的架构，而且显然，浏览器特定的 CSS 属性在当今时代已经很少见了。因此，de Vue 通常是自给自足的。

简而言之，我发现这种一体式架构非常令人愉快，但各个部分却清晰分开。这可以让您保持干净的代码，而且更加简洁。事实上，“业务逻辑/显示/样式”这三个部分的同时存在通常会鼓励您将代码重新划分为更小的模块，从而划分为更小的文件。

现在，如果我们仔细看看 Vue.js API 本身会怎样？

Vue.js API

在这里，我不会向您提供我遇到的 Vue.js API 的所有元素的详尽列表，而是只提供一些我发现相当代表 Vue 逻辑的非常具体的元素。

（重新）计算的值

让我们从 React 世界中众所周知的操作开始：在数据更新后智能地重新计算 HTML 渲染（或变量）。
有一个非常直观的compute()函数，它受益于记忆系统（一种“缓存”），以避免每次重新计算输出值：

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

登录后复制

这里仅当 PushBtn 的值发生变化时才计算 magicNumber。而且它是可验证的：消息“再次计算！”仅当单击不同的按钮时才显示在控制台中。
因此，与 React 不同，无需在该函数中显式指定要监视的变量。

同样，我们还发现了 watch 和 watchEffect ，它们分别允许你对组件的全部或部分属性的变化做出反应，就像 React 中的 useEffect 一样：

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

登录后复制

只需点击数字修改按钮即可增加“手表”计数器。
然后，watch() 允许我们在每次某些变量发生变化时触发回调。

该功能的优势在于深入变量修改分析：Vue 甚至可以检测到子对象深处的变化！

双向同步

从父组件声明属性并将其传递给子组件是一个相当重复的操作。也可以在子级和父级之间同步此值，例如在表单的输入中。

此外，不要像这样同时管理属性和基于事件的更新回调：

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

登录后复制

…可以使用 DefineModel 宏来代替，这样可以简化编写：

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

登录后复制

短多了！？再说了，模型只有一个，我连命名都可以省去！

和家长：

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

登录后复制

for 循环

看到 v-model 后继续 v-for 让我意识到 Vue.js 开始通过隐式代码引入很多“魔法”：

import './assets/main.css';

import { createApp } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import router from './router';

const app = createApp(App); // composant racine

app.use(createPinia()); // store
app.use(router); // routage des pages front

app.mount('#app');

登录后复制

结果：

正如人们所期望的，v-for 指令因此可以为可迭代的每个元素自动重复 HTML 模式的一部分（此处为

标签）。

在 React 方面，需要使用 JSX 自己构建每个元素，随着组件的增长，代码的可读性会降低：

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

  const color = ref('green');

  function toggleColor() {
    color.value = color.value === 'green' ? 'blue' : 'green';
  }
</script>

<template>
  <p class="main-text" @click="toggleColor">
    Cliquez sur ce texte pour changer de couleur.
  </p>
  <p v-if="color === 'green'">Le texte ci-dessus est vert.</p>
</template>

<style scoped>
  .main-text {
    color: v-bind(color);
  }
</style>

登录后复制

就我个人而言，从代码整洁度方面我更喜欢Vue的结构，只要不需要调试即可。？
顺便问一下，既然我们谈论的是调试，那么 Vue 生态系统工具呢？

开发工具

这里有 3 个在我的项目开发过程中引起我注意的工具。

VSCode 扩展：Vue 官方

我从显而易见的开始，但是，是的，VSCode Vue（和其他 IDE）有一个扩展，它添加了语法突出显示、自动完成、片段等。必备！

但是，我注意到着色和自动完成方面存在一些不稳定，有时有点反复无常？，在这里我能够欣赏到 React 方面更大的稳定性。

Vue.js 开发工具

与 React Developer Tools 浏览器插件一样，还有 Vue.js devtools 插件，我必须承认，它已经提供得很好：

有 4 个选项卡：

组件，我们可以在其中观察，还可以修改组件的状态；
Timeline，它允许你记录事件和组件渲染时间，它实际上对应于浏览器“性能”选项卡的一个版本，但专注于 Vue；
Pinia，它允许您直接观察和修改标准存储的状态？，我发现特别受欢迎的现成集成；
路线，您可以在其中列出不同的道路及其活动 - 这是一个我发现在我的中等规模项目上有点花哨的选项卡（特别是因为该信息与“组件”的信息不是很冗余" 选项卡，但这对于复杂的路由非常有用。

简而言之，对于调试，这里有您需要的一切，甚至更多！

虚拟化

几乎毫不奇怪（但仍然有优点！），还有一个用于 Vue 的 UI 库，它实现了 Google 的 Material Design，并且还提供了标准图标列表：Vuetify。

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

登录后复制