下一篇

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

今天的主题：

vue3与react 定义与修改数据

vue3与react 计算属性

vue3与react 实现监听

vue3与react hooks 定义与修改数据

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

vue3

react

import { useState } from 'react';
function App() {
const [todos, setTodos] = useState({ 
age: 25,
sex: 'man'

    })
const setObj = () => {

        setTodos({

            ...todos,
age: todos.age + 1

        })

    }
return (

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

vue3与react 计算属性

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

vue3

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 (

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

vue3与react 实现监听

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

vue3

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

import { useState, useEffect } from 'react'
function App() {
const [count, setCount] = useState(0)
const setCount = () => {

        setCount(count + 1)

    }

    useEffect(() => {
console.log(count)

    })
return (

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

总结

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