React with your left hand and Vue with your right.

Premises to consider:

Vue react (1)

Vue react (2)

Vue react (3)

In response to your requests, this article begins by embracing hooks. This article will compare vue3 with React 17.x (hooks) to understand the similarities between the two frameworks.

Today’s topic:

1. Vue3 and React define and modify data
2. Vue3 and React evaluate properties
3. Vue3 and React implement listening

Vue3 and React hooks define and modify data

In fact, both are based on hooks. This combination of high flexibility is appealing to most people. Both vue Options and React class are bloated and less reusable than hooks. Here’s an example for comparison.

vue3

<template>
    <div>
        <p @click='setObj'>age: {{obj.age}}</p>
        <p>sex: {{obj.sex}}</p>
    </div>
</template>
<script>
import { reactive } from 'vue'
export default {
    setup() {
        const obj = reactive({
          age: 25.sex: 'man'
        })
        function setObj() {
            obj.age ++
        }
        return {
            obj,
            setObj
        }
    }

}
</script>
Copy the code

react

import { useState } from 'react';
function App() {
    const [todos, setTodos] = useState({ 
        age: 25.sex: 'man'
    })
    const setObj = () = >{ setTodos({ ... todos,age: todos.age + 1})}return (
        <div>
            <p onClick={setObj}>{todos.age}</p>
            <p>{todos.sex}</p>
        </div>
    );
}


Copy the code

Vue supports template, while React supports JSX. This does not affect the use of javascript logic. Therefore, no matter how the framework changes, JS will still be used in our front-end. Please be sure to master!

Vue3 and React evaluate properties

The purpose of calculating properties is not to put too many complicated operations in the template, which is the point of calculating properties. Vue3 provides computed methods and React Hook provides useMemo to implement computed properties.

vue3

<template>
    <div>
        <p>age: {{obj.age}}</p>
        <p>sex: {{obj.sex}}</p>
        <p>info: {{people}}</p>
    </div>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
    setup() {
        const obj = reactive({
          age: 25.sex: 'man'
        })
        const people = computed(() = > {
          return `this people age is ${obj.age}, sex is ${obj.sex}`
        })
        return {
          obj,
          people
        }
    }

}
</script>

Copy the code

react

import { useMemo, useState } from 'react'
function App() {
    const [obj, setObj] = useState({ 
        age: 25.sex: 'man'
    })
    const people = useMemo(() = > {
        return `this people age is ${obj.age} and sex is ${obj.sex}`
    }, [obj])
    return (
        <div>
            <p>age: {obj.age}</p>
            <p>sex: {obj.sex}</p>
            <p>info: {people}</p>
        </div>)}Copy the code

It is possible to use a method that is exposed in the framework to implement an operation, which makes it easier to trace and locate errors. This is the trend in modern frameworks. Not only does it allow developers to combine and reuse their code more flexibly, but it also makes it easier to pinpoint the source of data and methods.

Vue3 and React implement listening

In Vue3, Watch is exposed as a method by passing in the corresponding listening parameters and the callback function. React also has a similar function, useEffect, It actually serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount, but has been consolidated into an API. See the examples:

vue3

<template>
    <div>
        <p @click="setCount">count: {{count}}</p>
    </div>
</template>
import { ref, watch } from 'vue'
export default {
    setup() {
        const count = ref(0)
        watch(count,
          (val) = > {
            console.log(val)
          },
          { immediate: true.deep: true})function setCount() {
          count.value ++
        }
        return {
            count,
            setCount
        }
    }
    
}
Copy the code

react

import { useState, useEffect } from 'react'
function App() {
    const [count, setCount] = useState(0)
    const setCount = () = > {
        setCount(count + 1)
    }
    useEffect(() = > {
        console.log(count)
    })
    return (
        <div>
            <p onClick={setCount}>count: {count}</p>
        </div>)}Copy the code

Remember that the general trend of VUe3 is to rely on hooks. It’s not hard to see how any framework in the future will most likely rely on hooks. From the ancient three traditional king Kong HTML, CSS, script can produce a page to the present componentization, a JS can be a page.

conclusion

Functional programming is the trend, but in fact, many old projects are based on the options of vue2. X or React class. It is a headache to migrate and iterate these projects to the latest, of course, it is most important to choose the technology system suitable for the existing project.