生命周期 Vue&&React

今天说一下生命周期 vue和react

生命周期是很重要的 也是我们因该具备的

React生命周期

一:创建阶段

constructor//这里是初始化函数,设置组件的初始化状态,state执行一次,
componentWillMount//组件将要被创建执行一次
render//组件将要被执行多次
componentDidMount//组件创建成功//执行一次
componentWillReceiveProps(新的props)//这个是当props更新时触发

二:生长阶段

shouldComponentUpdate//在这里可以控制组件是否被更新,它接收两个参数,一个最新的props一个最新的state,而且必须有返回布尔类型的值,返回true则更新组件返回false则不更新
componentWillUpdate//组件将要被更新,它和那个shouldComponentUpdate一样也是接收两个参数
render//为什么在这里又再次提了一遍render呢,因为我们上面所有render会被执行多次,就是每次执行完 componentWillUpdate以后就会去执行一遍render
componentDidUpdate//组件更新完成,接受两个参数,一个是上一次的props一个是上一次的state

三:卸载阶段

componentWillUnmount//卸载组件

接下来说下vue的生命周期

Vue的生命周期

beforeCreated(创建前):实例组件刚创建
create(创建):数据data已经初始化完成,但是DOM未渲染,我感觉这里更适合请求数据,因为用户不想看到空页面
beforeMount:Dom未完成挂载,数据也初始化完成,但是数据的双向绑定还是显示 {{ }}, 这里是因为Vue采用了Virtual DOM(虚拟DOM)技术。
mounted:数据和模板已经结合,在这个生命周期函数中,我们可以通过this.$refs值访问到真实的dom结构
beforeUpdate:只要页面数据触更新都会去触发,数据更新之前所做的一些操作
updated:只要页面数据更新都会去触发,更新后
befoDestory (销毁前)
1.在这个生命周期中,还是可以继续访问到真实的dom结构以及data中的数据
2.一般我们都会在这个生命周期函数中,去做一些事件解绑/移除的操作
destroyed(销毁后)
1.将dom与数据之间的关联进行断开
2.在当前生命周期函数中是访问不到真实的dom结构的

发布了13 篇原创文章 · 获赞 0 · 访问量 185
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览