Vue 中比在 React 牛的地方

站长

2024年04月21日 11:05 · 阅读数 1

在 Vue 中我有比在 React 中更喜欢的东西

让我们深入研究一些与 React 方法截然不同的 Vue ！

1.安装很有趣

Vue 开箱即用的印象遥遥领先——npm create vue@latest感觉像是一种精心设计的体验，而npm create-react-app只是一个普通的 NPM 命令。与 CRA 的流程相比，我更喜欢以交互方式选择要安装的软件包（如 Vue 中所做的那样）。

最重要的是，Vue 安装的软件包提供了比 CRA 更完整的开发体验，涵盖路由、状态管理和代码格式化等领域。

Vue 的安装过程具有出色的交互性。

另外，我们可以谈谈当您打开新项目时起始页有多大帮助吗？

后面的所有 Vue 示例都使用 Vue 3 中的 Composition API，它与函数式 React 最等效。

2. 直观的Reactivity System

与 React 的状态管理相比，Vue 的反应性系统感觉更直观且更少的样板代码。 Vue 自动处理依赖项跟踪和更新，使状态管理变得简单。

实例

<template>
  <p>{{ count }}</p>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const count = ref(0);

onMounted(() => {
  setInterval(() => {
    count.value++;
  }, 1000);
});

onUnmounted(() => clearInterval(interval));
</script>

React Equivalent

React 需要更多样板来实现类似的反应性，特别是对于依赖于先前状态值的效果和状态更新。还有谁每次要使用、useEffect、useMemo和时都必须查找它们之间的细微差别？ useCallback🙋🏾‍♂️

function Counter() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setCount(currentCount => currentCount + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <p>{count}</p>;
}

3. 单文件组件

单文件组件（SFC）绝对让人又爱又恨，但我认为它们很棒，特别是对于小型组件。在我看来，将 HTML、JavaScript 和 CSS 封装在一个文件中可以提高组织性和可读性。

Vue 单文件组件

<script setup lang="ts">
import { defineProps } from 'vue'

defineProps({
  message: String
})
</script>

<template>
  <div class="message-box">
    <p>{{ message }}</p>
  </div>
</template>

<style scoped>
.message-box {
  padding: 20px;
  border: 1px solid #eee;
}
</style>

React Equivalent

在 React 中，实现相同的封装通常涉及将关注点分离到不同的文件中或采用 CSS-in-JS 库，这会增加复杂性。

function MessageBox({ message }) {
  return (
    <div className="message-box">
      <p>{message}</p>
    </div>
  );
}
// CSS is managed separately or through CSS-in-JS solutions

4. 条件渲染

Vue 的指令系统（v-if、**v-for**等）提供了比 React 更易读的条件渲染方法。当 if/else 语句变得更加复杂时，这种优势变得更加明显。

带指令的 Vue 示例

<script setup lang="ts">
import { ref } from 'vue';

const isSubscribed = ref(false);
const isSubscriptionExpiring = ref(true);

// Above properties updated dynamically...
</script>

<template>
  <div>
    <p v-if="!isSubscribed">Please subscribe to access premium features.</p>
    <p v-else-if="isSubscriptionExpiring">Your subscription is expiring soon. Please renew to continue enjoying premium features.</p>
    <p v-else>Welcome back, valued premium user!</p>
  </div>
</template>

React Equivalent

function SubscriptionStatus() {
  const isSubscribed = false;
  const isSubscriptionExpiring = true;

  // Above properties updated dynamically...

  return (
    <div>
      {isSubscribed ? (
        isSubscriptionExpiring ? (
          <p>Your subscription is expiring soon. Please renew to continue enjoying premium features.</p>
        ) : (
          <p>Welcome back, valued premium user!</p>
        )
      ) : (
        <p>Please subscribe to access premium features.</p>
      )}
    </div>
  );
}

您当然可以将基于 JSX 的逻辑移至 JS 函数中，但初始阶段在 Vue 中更容易理解。

5. 计算属性

Vue 的计算属性简化了依赖于反应数据的复杂逻辑的处理。它们会自动缓存，并且仅在其依赖项发生变化时重新评估，从而优化性能。

实例

<script setup lang="ts">
import { computed, ref } from 'vue'

const price = ref(10)
const quantity = ref(3)
const totalPrice = computed(() => price.value * quantity.value)
</script>

<template>
  <p>Total price: {{ totalPrice }}</p>
</template>

React Equivalent

在 React 中，类似的功能需要 useMemo 钩子，从而增加了组件逻辑的复杂性和冗长性。

function TotalPrice() {
  const [price, setPrice] = React.useState(10);
  const [quantity, setQuantity] = React.useState(3);

  const totalPrice = React.useMemo(() => {
    return price * quantity;
  }, [price, quantity]);

  return <p>Total price: {totalPrice}</p>;
}

6. 简化的状态管理

Pinia 是推荐的 Vue 状态管理解决方案之一。由于它与 Vue 的紧密集成和周到的 API，它感觉比 React + Redux 中的等效代码更精简。

Vue 与 Pinia

// stores/counter.js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

// components/MyCounter.vue

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

<template>
  <button @click="counter.increment">Increment</button>
  <div>Current Count: {{ counter.count }}</div>
</template>

与 Redux 进行反应

// counterSlice.js

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1
    }
  },
})

export const { increment } = counterSlice.actions

export default counterSlice.reducer

// Counter.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'

export function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <button onClick={() => dispatch(increment())}>
      Increment
    </button>
    <span>{count}</span>
  )
}

综上所述

很明显，Vue 从第一次提交开始就优先考虑开发人员体验和应用程序性能。我认为这里最大的教训是，无论您的技能水平或掌握了什么工具，您总是可以从尝试新事物中学习！

Vue 还有什么你喜欢的吗？请在评论中告诉我！