From dde997ac27ab28b6898d8557adb28bd21e009dd7 Mon Sep 17 00:00:00 2001 From: Kerminate Date: Mon, 1 Jul 2019 10:10:44 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20vue=20=E4=B8=8E=20Mutable=20=E7=9B=B8?= =?UTF-8?q?=E7=BB=93=E5=90=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...350\257\273\343\200\212Vue3.0 Function API\343\200\213.md" | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git "a/109.\347\262\276\350\257\273\343\200\212Vue3.0 Function API\343\200\213.md" "b/109.\347\262\276\350\257\273\343\200\212Vue3.0 Function API\343\200\213.md" index be3cf6a5..dee10bbf 100644 --- "a/109.\347\262\276\350\257\273\343\200\212Vue3.0 Function API\343\200\213.md" +++ "b/109.\347\262\276\350\257\273\343\200\212Vue3.0 Function API\343\200\213.md" @@ -275,9 +275,9 @@ const Component = { 由于 `setup` 函数仅执行一次，怎么做到当 `useMouse` 导致 `x`、`y` 值变化时，可以在 `setup` 中拿到最新的值？ -在 React 中，`useMouse` 如果修改了 `x` 的值，那么使用 `useMouse` 的函数就会被重新执行，以此拿到最新的 `x`，而在 Vue 中，将 Hooks 与 Immutable 深度结合，通过包装 `x.value`，使得当 `x` 变更时，引用保持不变，仅值发生了变化。所以 Vue 利用 Proxy 监听机制，可以做到 `setup` 函数不重新执行，但 Template 重新渲染的效果。 +在 React 中，`useMouse` 如果修改了 `x` 的值，那么使用 `useMouse` 的函数就会被重新执行，以此拿到最新的 `x`，而在 Vue 中，将 Hooks 与 Mutable 深度结合，通过包装 `x.value`，使得当 `x` 变更时，引用保持不变，仅值发生了变化。所以 Vue 利用 Proxy 监听机制，可以做到 `setup` 函数不重新执行，但 Template 重新渲染的效果。 -这就是 Immutable 的好处，Vue Hooks 中，不需要 `useMemo` `useCallback` `useRef` 等机制，仅需一个 `value` 函数，直观的 Mutable 修改，就可以实现 React 中一套 Immutable 性能优化后的效果，这个是 Mutable 的魅力所在。 +这就是 Mutable 的好处，Vue Hooks 中，不需要 `useMemo` `useCallback` `useRef` 等机制，仅需一个 `value` 函数，直观的 Mutable 修改，就可以实现 React 中一套 Immutable 性能优化后的效果，这个是 Mutable 的魅力所在。 ## Vue Hooks 的优势