写给vue转react的同志们（4）

本系列文章将由浅慢慢深入，一步步带你领略react和vue的同工异曲之处，让你左手react，右手vue无忧。

前提要顾：

写给vue转react的同志们（1）

写给vue转react的同志们（2）

写给vue转react的同志们（3）

应各位老爷要求，这篇文章开始拥抱hooks，本文将从vue3与react 17.x（hooks）对比来感受两大框架的同工异曲之处。

今天的主题：

vue3与react 定义与修改数据
vue3与react 计算属性
vue3与react 实现监听

vue3与react hooks 定义与修改数据

实际上两者都是偏hooks的写法，这样的高灵活性的组合，相信大部分人还是觉得香的，无论是以前的vue options或是react class的写法都是比较臃肿且复用性较差的（相较于hooks）。下面举个例子对比一下。

代码语言：javascript复制

<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>

react

代码语言：javascript复制

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>
    );
}

通过比较上述代码可以看到vue3和react hooks基本写法是差不多的，只是vue提倡template写法，react提倡jsx写法，模板的写法并不影响你js逻辑的使用，所以不论框架再怎么变化，js也是我们前端的铁饭碗，请各位务必掌握好！

vue3与react 计算属性

计算属性这一块是为了不让我们在模板处写上太过复杂的运算，这是计算属性存在的意义。vue3中提供了computed方法，react hook提供了useMemo让我们实现计算属性（没有类写法中可以使用get来实现计算属性具体可看往期文章）

代码语言：javascript复制

<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>

react

代码语言：javascript复制

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>
    )
}

可以看到对比两大框架的计算属性，除了模板书写略有不同其他基本神似，都是hooks写法，通过框架内部暴露的某个方法去实现某个操作，这样一来追述和定位错误时也更加方便，hooks大概率就是现代框架的趋势，它不仅让开发者的代码可以更加灵活的组合复用，数据和方法来源也更加容易定位清晰。

vue3与react 实现监听

在vue3里watch被暴露成一个方法通过传入对应监听的参数以及回调函数实现，react中也有类似的功能useEffect，实际上他和componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。看例子：

代码语言：javascript复制

<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
        }
    }
    
}

react

代码语言：javascript复制

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>
    )
}

可以看到，vue3整体趋势是往hooks靠，不难看出来未来不论哪种框架大概率最终都会往hooks靠，react hooks无疑是给了我们巨大的启发，函数式编程会越来越普及，从远古时期的传统三大金刚html、css、script就能产出一个页面到现在的组件化，一个js即可是一个页面。

总结

函数式编程是趋势，但其实有很多老项目都是基于vue2.x的options写法或者react class的写法还是居多，把这些项目迁移迭代到最新才是头疼的事情，当然选择适合现有项目的技术体系才是最重要的。

react vue.js

0 人点赞