今天说一下生命周期 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结构的