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>
  <li
    v-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