React 的常用钩子函数在Vue中是如何设计体现出来的。

1、定义响应式数据：

React 通过 useState 和 useReducer Vue 通过 ref 和 reactive

  const [state, setState] = useState(initialState)const [state, dispatch] = useReducer(reducer, initialState)

2、定义缓存数据：

React 通过 memo 和 useMemo useCallback
Vue 通过 v-memo 指令和 computed 计算属性

 memo 允许你在属性不变时跳过重新渲染组件。useMemo 是一个 React 钩子，可让你在重新渲染之间缓存计算结果。useCallBack 包裹就能防止函数体在渲染的时候重复创建

3、访问 DOM 元素 && 获取组件实例

React 通过 useRef

const chartRef = useRef(null)
chartRef.current

Vue 通过 $refs 或 useTemplateRef获取DOM， 通过 getCurrentInstance 函数获取组件实例

const { proxy } = getCurrentInstance()
proxy.$refs["ruleFormRef"].validate(valid => {})
proxy.$modal.msgSuccess("修改成功")

4、DOM循环

React：

<ul>{colors.map((color) => (<li key={color}>{color}</li>))}
</ul>

Vue：

<ul><liv-for="color in colors":key="color">{{ color }}</li>
</ul>

5、点击事件

React: <button onClick={incrementCount}>+1</button>
Vue:  <button @click="incrementCount">+1</button>

6、生命周期

组件加载时：

React useEffect 
VUe onMounted 

7、startTransition 和 useTransition 搜索和过滤后大规模的数据渲染

const [isPending, startTransition] = useTransition();
startTransition(() => {// 此处的更新会被标记为低优先级setState(newValue);
});

8、Suspense

是一个内置组件，用来在组件树中协调对异步依赖的处理 相当于vue的 Suspense

9、ViewTransition

ViewTransition 以帮助你制作基于状态变化的过渡和动画 相当于vue的 Transition