码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-12 10:37:10      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:除了   等等   function   方法   number   操作   改变   利用   his   

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生命周期流程差不多但相对复杂点:
 
 

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

标签:除了   等等   function   方法   number   操作   改变   利用   his   

原文地址:https://www.cnblogs.com/zbbk/p/13097914.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!