vue 与 react 的区别详细例子

admin2年前 (2023-07-27)it知识467

以下是一个具体例子，展示了 Vue.js 和 React 在实现一个同样的功能时的一些区别：

需求：实现一个用户列表，包括用户名和删除按钮，点击删除按钮可以删除相应的用户。

Vue.js 实现：

JavaScript

<template>
  <div>
    <ul>
      <li v-for="(user, index) in users" :key="index">
        <div>{{ user.name }}</div>
        <button @click="deleteUser(index)">删除</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { name: '张三' },
        { name: '李四' },
        { name: '王五' }
      ]
    };
  },
  methods: {
    deleteUser(index) {
      this.users.splice(index, 1);
    }
  }
};
</script>

React 实现：

JavaScript

import React from 'react';
class UserList extends React.Component {
  state = {
    users: [
      { name: '张三' },
      { name: '李四' },
      { name: '王五' }
    ]
  };
  deleteUser = (index) => {
    this.setState((prevState) => ({
      users: prevState.users.filter((user, i) => i !== index)
    }));
  };
  render() {
    return (
      <div>
        <ul>
          {this.state.users.map((user, index) => (
            <li key={index}>
              <div>{user.name}</div>
              <button onClick={() => this.deleteUser(index)}>删除</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}
export default UserList;

在这个例子中，Vue.js 使用模板语法和计算属性来实现数据的渲染和删除操作，而 React 使用 JSX 语法和组件来实现。在 Vue.js 中，数据和视图是双向绑定的，当数据发生变化时，视图会自动更新，而在 React 中，数据流是单向的，需要手动调用 setState 方法来更新状态并重新渲染组件。

标签: JavaScript