Vue 與 React 生命週期比較

以 Vue 3 與 React 做比較

建立實體：

Vue：

const vm = Vue.createApp({

data(){

return{

name:'Jeff'

}

}

})

vm.mount('#app')

React：

ReactDOM.render(

  <h1>Hello, world!</h1>,

  document.getElementById('root')

);

初始化：

Vue：

setup()

React：

componentDidMount()




React 會 render 畫面兩次，並只顯示後一次 render 出來的結果，起始資料可以再這邊 call API。




更新畫面：

Vue：

onUpdated()

React：

componentDidUpdate()




React 的首次 render 不會觸發 DidUpdate




結束：

Vue：

onUnmounted()

React：

componentWillUnmount()




React 16.8之後狀態管理改用 Hook ，具有比生命週期更為直覺且省去複雜的 this，轉向 function component 為主的建置。

參考資料：

Vue

React