vue生命周期和react生命周期总结

Posted 2020-12-10 zbbk

vue框架和react框架虽然都是虚拟dom，组件化开发，其中的不同点还是蛮多的。首先vue的双向绑定而react则是单项数据流。react使用了jsx语法，让编程更组件话。除了这些他们的生命周期还是不一样的

总归他们都经历了 初始化阶段，运行阶段，销毁阶段。其中运行阶段又分渲染和数据更新两部分

先说下vue的生命周期相对比较简单：

初始化阶段：

1：new Vue(...)  实例化、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作

2：挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

运行阶段：

1：接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

2：接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom。

到这里还不算结束，如果在程序运行中，没有更新数据则无视，一旦有数据更新了，就会走以下两个钩子：beforeupdate,update

当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

销毁阶段：

1：当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

2：组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

总结起来无外乎就七个当然真实的流程要更细致复杂，有兴趣的可以自己研究源码，实际项目中用到这些完全够了：

newVue()实例化 => beforeCreate,created =>beforemounted,mounted =>(if data change){ beforeupdate,update } => beforedestroyed,destroyed

这里有几点要注意：

1：Vue的编译实际上是指Vue把模板编译成 render 函数的过程

2：render选项参数比template更接近Vue解析器！所以综合排列如下：

　　render函数选项  > template参数  > 外部HTML

3：通过Vue.compile这个实时编译模板的函数来看一看：

用官方文档的例子

<div>
  <header>
    <h1>I‘m a template!</h1>
  </header>
  <p v-if="message">
    {{ message }}
  </p>
  <p v-else>
    No message.
  </p>
</div>
会被渲染成:
function anonymous() {
  with(this){return _c(‘div‘,[_m(0),(message)?_c(‘p‘,[_v(_s(message))]):_c(‘p‘,[_v("No message.")])])}
}

4:在Vue中，数据更改会导致虚拟 DOM 重新渲染，并先后调用beforeUpdate钩子函数和updated钩子函数

重渲染（调用这两个钩子函数）的前提是被更改的数据已经被写入模板中！！（这点很重要）

var vm = new Vue({
  el: ‘#app‘,
  data: {
    number: 1
  },
  template: ‘<div id="app"><p></p></div>‘,
  beforeUpdate: function () {
    console.log(‘调用了beforeUpdate钩子函数‘)//控制台没有打印
  },
  updated: function () {
    console.log(‘调用了updated钩子函数‘)//控制台没有打印
  }
})
 
vm.number = 2

// 在模板中使用number这个数据
  template: ‘<div id="app"><p>  {{ number }} </p></div>‘,//添加{{number}}

beforeUpdate: function () {
    console.log(‘调用了beforeUpdate钩子函数‘)//此时被打印出来了
  },
  updated: function () {
    console.log(‘调用了updated钩子函数‘)//此时被打印出来了

  }

也就是说：只有Vue实例中的数据被“写入”到我们的模板中，它的改变才可以被Vue追踪，重渲染从而调用 beforeUpdate钩子函数和updated钩子函数

5：

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。

 

destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

 

就如同调用在Vue实例上调用$mounted会使暂停的生命周期继续一样，调用$destroy()会直接销毁实例

 

接下来看react生命周期，它相对于vue生命周期流程差不多但相对复杂点：