郑州网站制作网,房屋装修设计师怎么找,宁波企业免费建站,有哪个网站可以学做吃的Vue 的父子组件生命周期
以下分为三部分#xff0c;加载渲染阶段——更新阶段——销毁阶段#xff0c;我们来一一介绍#xff1a;
1、加载渲染阶段 在加载渲染阶段#xff0c;一定得等子组件挂载完毕后#xff0c;父组件才能挂载完毕#xff0c;所以父组件的 mounted 在…Vue 的父子组件生命周期
以下分为三部分加载渲染阶段——更新阶段——销毁阶段我们来一一介绍
1、加载渲染阶段 在加载渲染阶段一定得等子组件挂载完毕后父组件才能挂载完毕所以父组件的 mounted 在最后。 beforeCreate父组件 created父组件 beforeMount父组件 beforeCreate子组件 created子组件 beforeMount子组件 Mounted子组件 Mounted父组件
2、更新阶段 当父子组件有数据传递时才有这个更新阶段执行顺序的比较。 beforeUpdate父组件 beforeUpdate子组件 updated子组件 updated父组件
3、销毁阶段 beforeDestroy父组件 beforeDestroy子组件 destroyed子组件 destroyed父组件
React 的父子组件生命周期
1、挂载阶段 父组件constructor() 父组件static getDerivedStateFromProps() 父组件render() 子组件constructor() 子组件static getDerivedStateFromProps() 子组件render() 子组件componentDidMount() 父组件componentDidMount()
2、更新阶段 父组件static getDerivedStateFromProps() 父组件shouldComponentUpdate() 父组件render() 子组件static getDerivedStateFromProps() 子组件shouldComponentUpdate() 子组件render() 子组件getSnapshotBeforeUpdate() 父组件getSnapshotBeforeUpdate() 子组件componentDidUpdate() 父组件componentDidUpdate()
3、卸载阶段 子组件componentWillUnmount() 父组件componentWillUnmount()
Vue3.0 的生命周期 所有生命周期钩子的this上下文都是绑定至实例的。
1、beforeCreate在实例初始化之后、进行数据帧听和事件/侦听器的配置之前同步调用。 2、created实例创建完成主要包括数据帧听、计算属性、方法、事件/侦听器注意由于挂在阶段还未开始因此$el还不可用。 3、beforeMount挂在之前调用render函数首次调用。 4、mounted实例挂在完成后调用注意mounted不会保证所有子组件都已挂载完成可以使用$nextTick()。 5、beforeUpdate数据发生改变之后DOM被更新之前调用。 6、updated在数据更改导致的虚拟DOM重新渲染和更新完毕之后调用注意updated不会保证所有子组件都已挂载完成可以使用$nextTick()。 7、activated被keep-alive缓存的组件激活时 调用。 8、deactivated被keep-alive缓存的组件失活时调用。 9、beforeUnmount在组件实例卸载之前调用。 10、unmounted组件实例卸载之后调用注意实例所有指令都被解绑所有侦听器都被移除所有子组件实例都被卸载。 11、errorCaptured在捕获一个来自后代组件的错误时被调用可以返回false可以阻止该错误继续向上传播。。 12、renderTracked跟踪虚拟DOM重新渲染时调用可用来查看哪个操作跟踪了组件及该操作的目标对象和键。 13、renderTriggered当虚拟DOM重新渲染被触发时调用用来监听什么操作触发了重新渲染以及该操作的目标对象和键。 其实一般情况下用的最多的就是组件创建期间的一些声明周期钩子比如created、mounted、beforeUnmountVue 2.x版本中是beforeDestroy等。
补充点setup作为组合式API入口点其调用时间是在创建组件实例时在初始 prop 解析之后立即调用。在生命周期方面它是在beforeCreate钩子之前调用的。
选项式API的生命周期选项与组合式API之间的映射
beforeCreate - 使用 setup() created - 使用 setup() beforeMount - onBeforeMount mounted - onMounted beforeUpdate - onBeforeUpdate updated - onUpdated activated - onActivated deactivated - onDeactivated beforeUnmount - onBeforeUnmount unmounted - onUnmounted errorCaptured - onErrorCaptured renderTracked - onRenderTracked renderTriggered - onRenderTriggered
