Vue 的 computed 和 watch 的区别 | HZFE - 剑指前端 Offer

[utterances-bot]

Vue 的 computed 和 watch 的区别 | HZFE - 剑指前端 Offer

相关问题

https://febook.hzfe.org/awesome-interview/book1/frame-vue-computed-watch

[MusherM]

从Vue的watch和computed的出发，我们可以聊聊面试官最喜欢问的React和Vue有什么区别的问题

1. React 的 useEffect + state 的组合，在每次依赖变化时都会完整的更新组件（这也意味着useEffect 外的代码也会执行），但 Vue 不会，Vue 只会一开始执行一次所有代码，然后后面只根据依赖变化执行对应的响应式代码。
2. 正因如此，对于 React 来说，所有依赖于 state 的变量都自动具有响应式，但 Vue 必须通过计算属性来声明
3. 同理，在 React 中，不管你改变了什么响应式变量，都会导致组件的重新渲染；但在 Vue 中，如果你改变的响应式变量并没有页面元素依赖他，则不会导致组件的重新渲染
4. 对于 Vue 来说，响应式是 Opt-in 的，也就是你必须通过 watchEffect、computed 等 Hook “引入”响应式；但 React 的响应式是 Opt-Out 的，如果你不想要每次重新渲染某个响应式变量，而是依赖于某个变量的更新再触发渲染，则需要通过 useMemo 来让其退出响应式