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 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
express异步函数异常捕获示例详解
Nov 30 Javascript
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实现的获取URL信息的类
2007/01/02 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
原生JavaScript实现todolist功能
2018/03/02 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
Python基础语法(Python基础知识点)
2016/02/28 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python实现银行实战系统
2020/02/26 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
python 安装移动复制第三方库操作
2020/07/13 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
教师找工作推荐信
2013/11/23 职场文书
小学生暑假感言
2014/02/06 职场文书
聚美优品的广告词
2014/03/14 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
闪闪红星观后感
2015/06/08 职场文书
政协常委会议主持词
2015/07/03 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers