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 相关文章推荐
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
javascript实现简单的进度条
Jul 02 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
js实现中文实时时钟
Jan 15 Javascript
vue3使用vue-count-to组件的实现
Dec 25 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
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
python 识别图片中的文字信息方法
2018/05/10 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
python写入文件自动换行问题的方法
2019/07/05 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
八年级数学教学反思
2014/01/31 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
博士生专家推荐信
2014/09/26 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
雷峰塔导游词
2015/02/09 职场文书
初中英语教学反思范文
2016/02/15 职场文书