Vue和React的区别

组件开发方式：

1. Vue 使用单文件组件（SFC）, HTML, JS 和 CSS 在一个文件内实现

   <template>
     <div class="my-component">
       <!-- HTML模板 -->
     </div>
   </template>
   
   <script>
   export default {
     // JavaScript代码
   }
   </script>
   
   <style>
   .my-component {
     /* CSS样式 */
   }
   </style>
   

2. React使用 JSX 和 JavaScript

   import React from 'react';
   import './MyComponent.css';
   
   function MyComponent() {
     return (
       <div className="my-component">
         {/* JSX 模板 */}
       </div>
     );
   }
   
   export default MyComponent;
   

数据响应：

1. Vue3 基于响应式数据， 底层通过 new Proxy() 实现对数据变更的监控，相比于 React 更加的简单
2. React 采用 setState or useState，手动的方式进行变更。

生命周期

1. Vue3 生命周期更加灵活，8 个生命周期能够对组件各个阶段做到精确的控制

   beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted

2. React 生命周期更加精简

   constructor、componentDidMount、componentDidUpdate、componentWillUnmount

路由&状态管理

1. Vue3 使用 Pinia/Vuex，router 使用 Vue-Router, 提供了一种简单和直接的状态管理方式

import { defineStore, acceptHMRUpdate } from 'pinia'
import { useUserStore } from './user'

export const useCartStore = defineStore({
  id: 'cart',
  state: () => ({
    rawItems: [] as string[],
  }),
  getters: {
    items: (state): Array<{ name: string; amount: number }> =>
      state.rawItems.reduce((items, item) => {
        const existingItem = items.find((it) => it.name === item)

        if (!existingItem) {
          items.push({ name: item, amount: 1 })
        } else {
          existingItem.amount++
        }

        return items
      }, [] as Array<{ name: string; amount: number }>),
  },
  actions: {
    addItem(name: string) {
      this.rawItems.push(name)
    },

    removeItem(name: string) {
      const i = this.rawItems.lastIndexOf(name)
      if (i > -1) this.rawItems.splice(i, 1)
    },

    async purchaseItems() {
      const user = useUserStore()
      if (!user.name) return

      console.log('Purchasing', this.items)
      const n = this.items.length
      this.rawItems = []

      return n
    },
  },
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useCartStore, import.meta.hot))
}

2. React 使用 Redux/Mobx， router 使用 React-Router, 提供了更灵活的状态管理方案

   // actions
   export const Add = {
       type:'add'
   }
   export const Sub  = {
       type:'sub'
   }
   // reducer
   export default function counterReducer(state = initialState, action) {
       switch (action.type) {
           case 'add': return Object.assign({}, state, {
               count: state.count + 1
           });
           case 'sub': return Object.assign({}, state, {
               count: state.count - 1
           });
           default: return state;
       }
   }
   //设置一个初始值
   const initialState = {
       count: 0,
   }
   

视图功能

1. Vue3 的视图通过 Vue3 定义的指令 + 模板的方式，包含样式，事件，表单，lot，DOM 节点操作, Provide/inject

   <template>
     <div>
       <ul>
       	<li 
     			v-for="item,index in list" 
           @click="handleClick(index)"
           :style="{color: 'red'}"
             ></li>
       </ul>
       <div class="container">
         <header>
           <slot name="header"></slot>
         </header>
         <main>
           <slot></slot>
         </main>
         <footer>
           <slot name="footer"></slot>
         </footer>
   		</div>
         <div>
           <input name="username" :v-model="user.name" />
       	</div>
       </form>
     </div>
   </template>
   <script>
     methods: {
     	handleClick(index){
   
     }
   }
   </script>
   

2. React 视图使用原生 JS + 模板的方式，包含样式，时间，表单，Children, DOM 节点操作, Context

function MyComp() {
	return (
    <>
    	<ul ref="List">t
      { 
          list.map((v, i)=> <li onClick={handleClick(i)} style={{color: 'red'}}></li>)
      }
      </ul>
      <form>
        <div>
          <input name="username" onChange="(e) => handleInputChange(e)" value={user.name} />
      	</div>
    </form>
   </>
  )
}
    
const handleClick = (index) => {
    return () => {
        console.log(index)
    }    
}