vue和react 语法比较

前言

现在的时代就是vue 和react 的天下，当然在2者之间切换，有时候会忘了一些语法，

那么下面就比较下2者的语法，啊哈

Render

React.js

ReactDOM.render(<App />, document.getElementById("root"));

Vue.js

new Vue({
  render: (h) => h(App),
}).$mount("#root");

基本组件

React.js

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}

Vue.js

<template>
  <h1>Hello World</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
  };
</script>

Prop

React.js

function MyReactComponent(props) {
  const { name, mark } = props;
  return <h1>Hello {name}{mark}</h1>;
}
MyReactComponent.propTypes = {
  name: PropTypes.string.isRequired,
  mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
  mark: '!',
}
...
<MyReactComponent name="world">

Vue.js

<template>
  <h1>Hello {{ name }}</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
    props: {
      name: {
        type: String,
        required: true,
      },
      mark: {
        type: String,
        default: "!",
      },
    },
  };
</script>
...
<MyVueComponent name="World" />

事件绑定

React.js

Class component

class MyReactComponent extends React.Component {
  save = () => {
    console.log("save");
  };
  render() {
    return <button onClick={this.save}>Save</button>;
  }
}

Function component

function MyReactComponent() {
  const save = () => {
    console.log("save");
  };
  return <button onClick={save}>Save</button>;
}

Vue.js

<template>
  <button @click="save()">Save</button>
</template>
<script>
  export default {
    methods: {
      save() {
        console.log("save");
      },
    },
  };
</script>

自定义事件

React.js

function MyItem({ item, handleDelete }) {
  return <button onClick={() => handleDelete(item)}>{item.name}</button>;
  /*
   * 应用useCallback钩子来防止在每次渲染时生成新的函数。
   *
   * const handleClick = useCallback(() => handleDelete(item), [item, handleDelete]);
   *
   * return <button onClick={handleClick}>{item.name}</button>;
  */
}
...
function App() {
  const handleDelete = () => { ... }
  return <MyItem item={...} handleDelete={handleDelete} />
}

Vue.js

new Vue({
  render: (h) => h(App),
}).$mount("#root");0

State

React.js

Class component

new Vue({
  render: (h) => h(App),
}).$mount("#root");1

Function component

new Vue({
  render: (h) => h(App),
}).$mount("#root");2

Vue.js

new Vue({
  render: (h) => h(App),
}).$mount("#root");3

Change-State

React.js

Class component

new Vue({
  render: (h) => h(App),
}).$mount("#root");4

Function component

new Vue({
  render: (h) => h(App),
}).$mount("#root");5

Vue.js

new Vue({
  render: (h) => h(App),
}).$mount("#root");6

双向绑定 (仅Vue.js)

React.js

React没有双向绑定，因此我们需要自己处理数据流

new Vue({
  render: (h) => h(App),
}).$mount("#root");7

Vue.js

new Vue({
  render: (h) => h(App),
}).$mount("#root");8

计算属性

React.js

React.js没有计算属性，但我们可以通过react hook轻松实现

new Vue({
  render: (h) => h(App),
}).$mount("#root");9

Vue.js

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}0

Watch

React.js

React.js没有 watch 属性，但是我们可以通过react hook轻松实现

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}1

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}2

Vue.js

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}3

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}4

Children-and-Slot

React.js

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}5

Vue.js

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}6

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}4

渲染HTML

React.js

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}8

Vue.js

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}9

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}4

条件渲染

React.js

<template>
  <h1>Hello World</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
  };
</script>1

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}2

Vue.js

<template>
  <h1>Hello World</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
  };
</script>3

列表渲染

React.js

<template>
  <h1>Hello World</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
  };
</script>4

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}2

Vue.js

<template>
  <h1>Hello World</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
  };
</script>6

Render-Props

React.js

<template>
  <h1>Hello World</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
  };
</script>7

Vue.js(slot)

<template>
  <h1>Hello World</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
  };
</script>8

生命周期

React.js

Class component

<template>
  <h1>Hello World</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
  };
</script>9

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}2

Function component

function MyReactComponent(props) {
  const { name, mark } = props;
  return <h1>Hello {name}{mark}</h1>;
}
MyReactComponent.propTypes = {
  name: PropTypes.string.isRequired,
  mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
  mark: '!',
}
...
<MyReactComponent name="world">1

Vue.js

function MyReactComponent(props) {
  const { name, mark } = props;
  return <h1>Hello {name}{mark}</h1>;
}
MyReactComponent.propTypes = {
  name: PropTypes.string.isRequired,
  mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
  mark: '!',
}
...
<MyReactComponent name="world">2

错误处理

React.js

function MyReactComponent(props) {
  const { name, mark } = props;
  return <h1>Hello {name}{mark}</h1>;
}
MyReactComponent.propTypes = {
  name: PropTypes.string.isRequired,
  mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
  mark: '!',
}
...
<MyReactComponent name="world">3

Vue.js

function MyReactComponent(props) {
  const { name, mark } = props;
  return <h1>Hello {name}{mark}</h1>;
}
MyReactComponent.propTypes = {
  name: PropTypes.string.isRequired,
  mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
  mark: '!',
}
...
<MyReactComponent name="world">4

Ref

React.js

Class component

function MyReactComponent(props) {
  const { name, mark } = props;
  return <h1>Hello {name}{mark}</h1>;
}
MyReactComponent.propTypes = {
  name: PropTypes.string.isRequired,
  mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
  mark: '!',
}
...
<MyReactComponent name="world">5

Function component

function MyReactComponent(props) {
  const { name, mark } = props;
  return <h1>Hello {name}{mark}</h1>;
}
MyReactComponent.propTypes = {
  name: PropTypes.string.isRequired,
  mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
  mark: '!',
}
...
<MyReactComponent name="world">6

function MyReactComponent(props) {
  const { name, mark } = props;
  return <h1>Hello {name}{mark}</h1>;
}
MyReactComponent.propTypes = {
  name: PropTypes.string.isRequired,
  mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
  mark: '!',
}
...
<MyReactComponent name="world">7

Vue.js

function MyReactComponent(props) {
  const { name, mark } = props;
  return <h1>Hello {name}{mark}</h1>;
}
MyReactComponent.propTypes = {
  name: PropTypes.string.isRequired,
  mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
  mark: '!',
}
...
<MyReactComponent name="world">8

性能优化

React.js

PureComponent

function MyReactComponent(props) {
  const { name, mark } = props;
  return <h1>Hello {name}{mark}</h1>;
}
MyReactComponent.propTypes = {
  name: PropTypes.string.isRequired,
  mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
  mark: '!',
}
...
<MyReactComponent name="world">9

shouldComponentUpdate

<template>
  <h1>Hello {{ name }}</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
    props: {
      name: {
        type: String,
        required: true,
      },
      mark: {
        type: String,
        default: "!",
      },
    },
  };
</script>
...
<MyVueComponent name="World" />0

React.memo

<template>
  <h1>Hello {{ name }}</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
    props: {
      name: {
        type: String,
        required: true,
      },
      mark: {
        type: String,
        default: "!",
      },
    },
  };
</script>
...
<MyVueComponent name="World" />1

useMemo

<template>
  <h1>Hello {{ name }}</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
    props: {
      name: {
        type: String,
        required: true,
      },
      mark: {
        type: String,
        default: "!",
      },
    },
  };
</script>
...
<MyVueComponent name="World" />2

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}2

useCallback

<template>
  <h1>Hello {{ name }}</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
    props: {
      name: {
        type: String,
        required: true,
      },
      mark: {
        type: String,
        default: "!",
      },
    },
  };
</script>
...
<MyVueComponent name="World" />4

Vue.js

v:once

<template>
  <h1>Hello {{ name }}</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
    props: {
      name: {
        type: String,
        required: true,
      },
      mark: {
        type: String,
        default: "!",
      },
    },
  };
</script>
...
<MyVueComponent name="World" />5

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}4

函数式组件：我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。

<template>
  <h1>Hello {{ name }}</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
    props: {
      name: {
        type: String,
        required: true,
      },
      mark: {
        type: String,
        default: "!",
      },
    },
  };
</script>
...
<MyVueComponent name="World" />7

// Class component
class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
// Function component
function MyReactComponent() {
  return <h1>Hello world</h1>;
}4

keep-alive 组件

<template>
  <h1>Hello {{ name }}</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
    props: {
      name: {
        type: String,
        required: true,
      },
      mark: {
        type: String,
        default: "!",
      },
    },
  };
</script>
...
<MyVueComponent name="World" />9

以上就是整理的一些资料对比，也查考一些资料，

哈哈，继续努力

宙飒天下网

前言

Render

基本组件

React.js

Vue.js

Prop

事件绑定

React.js

Vue.js

自定义事件

State

React.js

Vue.js

Change-State

React.js

Vue.js

双向绑定 (仅Vue.js)

React.js

Vue.js

计算属性

React.js

Vue.js

Watch

React.js

Vue.js

Children-and-Slot

渲染HTML

条件渲染

列表渲染

Render-Props

生命周期

React.js

Vue.js

错误处理

Ref

React.js

Vue.js

性能优化

React.js

Vue.js

相关阅读

RXThinkCMF 敏捷开发框架 Laravel10.x+Layui 版本 v2.0.0 发布

开放！云原生的数据库审计解决方案

wu-framework-parent 1.2.3-JDK17 正式版发布

Ant Design 5.14.2 发布，企业级 UI 设计语言和 React 实现

发表评论取消回复

还没有评论，来说两句吧...

目录[+]