【React和Vue的对比】

---

三大属性

1.state

React

React强调数据的不变性，使用 this.setState()进行修改数据，它会以该组件为根，重新渲染整个组件子树。（如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手动shouldComponentUpdate 方法。)

Vue

Vue是双向绑定，通过Object.defineProperty来监听data数据的改变（但是考虑性能问题，他只是做一层浅比较，无法对象或者数据的变化，可以用Vue.set进行添加，或者用push等Vue封装的方法)。

2.props

React和Vue都是单向数据流的

React

 <Hello list={
   this.state.list}>
//子组件通过this.props拿到
  this.props.list

Vue

//父组件
<Home  :msg='msg'/>
//子组件，会在这个组件实例的直下方
 props:["msg"]

3.refs

React

//三种方式创建
 1.<p ref='p'>123</p>
 2.<p ref={
   (c)=>{
   this.p = c}}>123</p>
 3.this.p = React.createRef();
//通过这个拿到
 this.refs

Vue

<input type="text" ref="input">
  this.$refs

css

React

行类样式

必须是{ {}}

<div style={
   {
   backgroundColor:'blue',color:'#ff671b'}}></div>

css模块化

import ChildrenCss from “./index.module.css”;
classnames库

css in js

通过js来操作css，社区的styled-component、jss等

 <div className='title'>

less

           {
   
              test: lessRegex,
              use: getStyleLoaders(
                {
   
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'less-loader'
              ),
              sideEffects: true,
            },

Vue

 title{
   
    font-size: 100px;
    background-color: rgb(18, 20, 20);
   }
 <div :style='title'>
 arrs:[title:true,other:false]
 <div :class='arrs'>
  
 <div :style={
   font-size: 100px， background-color: rgb(18, 20, 20)}>

生命周期

React

vue

Mounting 挂载顺序(初始化)

1.constructor(props)：初始化 state 和 props 数据(相当于beforeCreate)
新增 static getDerivedStateFromProps(nextProps, prevState)：组件初始化和被更新时调用用来替代
2.componentWillMount() 在组件即将被挂载到页面时执行(16.3已废弃)(相当于beforeMount)
3.render()：渲染组件
4.componentDidMount()：在组件被挂载到页面后执行，只在挂载时执行一次(相当于mounted)

Updation 更新顺序(更新)

1.static getDerivedStateFromProps(nextProps, prevState)：组件初始化和被更新时调用
2.shouldComponentUpdate(nextProps, nextState)：在组件被更新之前执行 (return true 更新 , return false 不更新)(相当于beforeUpdate)
3.render()： 渲染页面
4.static getSnapshotBeforeUpdate(prevProps, prevState)(相当于updated)
componentDidUpdate()：state或props更新后调用

Unmounting 卸载(销毁)

1.componentWillUnmount()：在组件即将被页面剔除时执行(相当于beforeDestroy)

vue生命周期

beforeCreate

created

beforeMount

mounted

更新(元素或组件的变更操作)

beforeUpdate

updated

销毁（销毁相关属性）

beforeDestroy

destroyed

路由

React路由

react-router-dom v6举例

//通过useRoutes进行路由的统一管理
const routes = [
    {
   
        path: '/about',
        element: <About />,
    },
    {
   
        path: '/home',
        element: <Home />,
    },
    {
   
        path: