vue 与 react 的区别详细例子

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

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

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

Vue.js 实现：

<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 实现：

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