vue生命周期和react生命周期对比【推荐】


Posted in Javascript onSeptember 19, 2018

个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),还提供了更多的属性(computed,watch),我还是比较喜欢用react的,更接近js原生,更容易于理解它。

一 vue的生命周期如下图所示(很清晰)初始化、编译、更新、销毁

vue生命周期和react生命周期对比【推荐】

二 vue生命周期的栗子

 注意触发vue的created事件以后,this便指向vue实例,这点很重要

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>vue生命周期</title>
    <script src="../js/vue.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
  <body>
    <div class="test" style="border: 1px black dashed;padding: 8px;">
      {{a}}
    </div>
    <div class="test2" style="border: 1px red solid;margin-top: 10px;padding: 8px;">
      我是内容二
    </div>
    <script type="text/javascript">
      var myVue = new Vue({
        el: ".test",
        data: {
          a: "我是内容,在控制台输入myVue.a=123456,可以改变我的值"
        },
        created: function () { 
          //在实例创建之后同步调用。此时实例已经结束解析选项,这意味着已建立:数据绑定,计算属性,方法,watcher/事件回调。
          //但是还没有开始 DOM 编译,$el 还不存在,但是实例存在,即this.a存在,可打印出来 。
          console.log("建立");
        },
        beforeCompile: function () {
          console.log("未开始编译");
        },
        compiled: function () { 
          //在编译结束后调用。此时所有的指令已生效,因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。
          console.log("编译完成");
        },
        ready: function () { 
          //在编译结束和 $el 第一次插入文档之后调用,如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入(如 vm.$appendTo() 等方法或指令更新)才触发 ready 钩子。
          console.log("一切准备好了");
        },
        attached :function () { //myVue.$appendTo(".test2")暂时触发不了,不知道怎么解决
          //在 vm.$el 插入 DOM 时调用。必须是由指令或实例方法(如 $appendTo())插入,直接操作 vm.$el 不会 触发这个钩子。
          console.log("插入DOM成功");
        },
        detached :function () { //触发事件 myVue.$destroy(true),其中参数true控制是否删除DOM节点或者myVue.$remove()
          //在 vm.$el 从 DOM 中删除时调用。必须是由指令或实例方法删除,直接操作 vm.$el 不会 触发这个钩子。
          console.log("删除DOM成功");
        },
        beforeDestroy: function () { //触发方式,在console里面打myVue.$destroy();
          //在开始销毁实例时调用。此时实例仍然有功能。
          console.log("销毁前");
        },
        destroyed: function () {  //触发方式,在console里面打myVue.$destroy();其中myVue.$destroy(true)是删除DOM节点,会触发detached函数,但是实例仍然存在
          //在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑,注意是解绑不是销毁,所有的子实例也已经被销毁。
          console.log("已销毁");
        }
    });
    </script>
  </body>
</html>

一、react生命周期

React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁

vue生命周期和react生命周期对比【推荐】

•初始化

1、getDefaultProps()

设置默认的props,也可以用ufaultProps设置组件的默认属性.

2、getInitialState()

在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。此时可以访问this.props

3、componentWillMount()

组件初始化时只调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state。

4、 render()

react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。

5、componentDidMount()

组件渲染之后调用,只调用一次。

•更新

6、componentWillReceiveProps(nextProps)

组件初始化时不调用,组件接受新的props时调用。

7、shouldComponentUpdate(nextProps, nextState)

react性能优化非常重要的一环。组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候

8、componentWillUpdata(nextProps, nextState)

组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state

9、render()

组件渲染

10、componentDidUpdate()

组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。

•卸载

11、componentWillUnmount()

组件将要卸载时调用,一些事件监听和定时器需要在此时清除。

总结

以上所述是小编给大家介绍的vue生命周期和react生命周期对比,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
IE php关于强制下载文件的代码
Aug 23 Javascript
ExtJs使用总结(非常详细)
Mar 22 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
Vue瀑布流插件的使用示例
Sep 19 #Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 #Javascript
解决vuecli3.0热更新失效的问题
Sep 19 #Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 #Javascript
解决vue热替换失效的根本原因
Sep 19 #Javascript
三种Webpack打包方式(小结)
Sep 19 #Javascript
Vue.js更改调试地址端口号的实例
Sep 19 #Javascript
You might like
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
完善的jquery处理机制
2016/02/21 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
详解Python中break语句的用法
2015/05/14 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
python字典的值可以修改吗
2020/06/29 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
浅析Python的命名空间与作用域
2020/11/25 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
写给女朋友的道歉信
2014/01/08 职场文书
《在家里》教后反思
2014/03/01 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
库房保管员岗位职责
2014/04/07 职场文书
大学新生军训方案
2014/05/03 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
学前教育专业求职信
2014/09/02 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
党员自评材料范文
2014/12/17 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
信仰观后感
2015/06/03 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python