vue3.0用法对比react hook

网上有很多大佬，都说vue3.0的很像react hook，在好奇心的驱使下，研究了几个demo进行对比，在我看来，原理是比较接近，都是采用了函数式组件编程，废弃了class组件编程的方式，但是语法用起来差异还是比较大的。

生命周期

Vue：废弃了beforeCreate和create，使用setup代替，定义的数据/方法/生命周期都是定义在setup当中，而不是一个并行的出现。

export default {
  setup (props,context) {
    //生命周期
    onMounted(()=>{
      console.log(111111);
    })
    onBeforeUnmount(()=>{
      console.log(222222);
    })
  }
}

React：生命周期都是通过useEffect来实现的，当数据发生变化的时候，会触发当前的回调函数，相当于componentDidMount和componentDidUpdate两个生命周期。

//componentDidMount触发
useEffect(()=>{
    console.log("生命周期")
},[]);
//componentDidUnmount触发
useEffect(()=>{
     return ()=>{
         console.log("生命周期")
     }
 },[]);
//componentUpdate触发
const mounted = useRef();
useEffect(()=>{
    if(!mounted.current){
        //componentDidMount
        mounted.current=true
    }else{
        //componnentDidUpdate
    }
});

定义响应式数据

Vue：相应数据不再通过Object.defineProperty进行数据劫持，是通过ES6的最新语法proxy，加快了响应速度，解决了不能截取数组下标数据和属性的疑难，还提供了isRef监听数据类型，toRefs转化数据类型。

import { reactive ,ref ,isRef, toRefs } from '@vue/composition-api';
export default {
  setup (props,context) {
    const res = reactive({'name':'zhuy'}); //定义响应式数据，针对对象
    const count = ref(0); //定义基本类型数据
    const obj = toRefs(res); //响应式数据还原成对象，主要解决响应式数据结构或其它操作出现的问题。
    return {
      res,
      count,
      doubleCount
    }
  }
}

React：通过useState定义数据，数组解构两个方法，获取和修改

import React, { useState } from 'react';
function Hook(){
    const [getCount,setCount] = useState(99);
    const [getName,setName] = useState("祝阳");
    return (
        

            
姓名:{getName}   年纪:{getCount}
            setCount(getCount+1)}>click
        
    )
}
export default Hook;

状态管理工具

Vue：在vue中定义vuex/store的方式不变，引用的方式发生了改变，这里需要注意的是，所有需要渲染的数据/方法都需要返回出来。

import { getCurrentInstance } from '@vue/composition-api';
export default {
  setup (props,context) {
    const name = computed(() => ctx.$store.state.res.name);
    return {
      name
    }
  }
}

React：使用了useReducer方法，第一个参数是reducer纯函数，第二参数是初始状态。结构出state和action，用户发送action，触发reducer返回新状态;

import React, { useReducer } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const myReducer = (state, action) => {
  switch(action.type) {
    case('countUp'):
      return {
        ...state,
        count: state.count + 1
      }
    default:
      return state
  }
}

function App() {
  const [state, dispatch] = useReducer(myReducer, { count: 0 })

  return (
    

       dispatch({ type: 'countUp' })}>
        +1
      
      
Count: {state.count}
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);