HZFE / awesome-interview

剑指前端 Offer
http://febook.hzfe.org/
Other
2.33k stars 176 forks source link

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

Open utterances-bot opened 1 month ago

utterances-bot commented 1 month ago

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

相关问题

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

MusherM commented 1 month ago

从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 来让其退出响应式